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J 43 «Understanding ECMAScript 6) > 4# Nicholas C. Zakas ， 在 线 阅 读 地 址 。 此 书 为 开 
源 书 籍 ， 可 访问 它 的 github 仓库 ， 若 发 现 问题 可 以 去 提交 issue 。 


此 书 的 官方 中 文 版 已 经 在 2017 年 7 月 由 电子 工业 出 版 社 正式 出 版 ， 可 查看 亚 马 运 上 的 购买 链 
接 。 而 此 处 的 翻译 只 是 我 本 人 的 义务 翻译 。 


此 书 中 文 版 出 版 之 前 ，oshotokill 对 本 书 进行 了 义务 翻译 (阅读 地 址 ) ， 但 整体 工作 未 完 
成 ， 欠 缺 三 章 : 
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号 与 符号 属性 
第 Ts 的 数组 功能 
第 十 二 章 代理 与 反射 接口 


原先 我 只 是 对 oshotokill 的 翻译 提出 了 修正 建议 ， 此 后 才 对 这 三 章 进 行 了 翻译 。 最 后 我 又 决 
定 将 此 书 完 整 重 译 一 遍 ， 只 遗漏 了 引言 部 分 。 其 中 有 少数 地 方 借鉴 了 oshotokill 的 翻译 ， 特 
此 表示 感谢 。 


在 GitBook 页 面 上 阅读 本 书 ， 请 点 击 首 页 右上 角 的 “Read” 按 钮 ; 也 可 以 点 击 “Download” 按 
钮 下 载 PDF ` Mobi 或 ePub 格式 的 电子 书 。 翻 译文 字 的 修正 过 程 可 查阅 修改 记录 。 


翻译 过 程 确 实 比 较 累 ， 毕 竞 是 第 一 次 做 全 书 翻译 。 这 次 是 出 于 本 人 兴趣 的 义务 翻译 ， 可 能 存 
在 错误 ， 肯 定 也 会 有 语言 表述 方面 的 一 些 问 题 ， 欢 迎 指正 。 无 论 是 对 原 书 内 容 的 指正 还 是 对 
译文 的 指正 ， 都 可 以 。 


本 书 原 作者 Zakas 长 期 供职 于 雅虎 ， 是 著名 的 JS È YU 的 主要 作者 ， 有 着 非常 丰富 的 一 线 
工作 经 验 。 他 同时 也 是 一 个 成 功 的 作者 ， 其 最 重要 的 著作 《 JavaScript 高 级 编程 》 基 本 上 是 
S 领域 的 必 读 之 作 ， 而 他 还 出 版 了 另 一 些 质 量 很 高 的 著作 。《 高 级 编程 》 一 书 实际 上 并 不 是 
完全 高 深 的 内 容 ， 而 是 从 基本 的 层次 开始 讲述 ， 和 逐步 提高 ， 全 书 结构 比较 良好 ， 对 初学 者 或 
有 一 定 经 验 的 开发 者 来 说 都 是 很 有 用 的 。 


oo 已 经 不 是 最 新 版 了 ， 但 到 目前 为 止 市 面 
上 完整 介绍 其 特性 的 书 却 非常 少 。 其 中 原因 也 许 是 语法 变动 太 大 ， 而 有 些 特性 浏览 器 直到 现 
在 都 没有 完全 支持 。 ie Babel 之 类 的 工具 ， 早 就 可 以 开始 使 用 ES6 了 ， P 方面 完 
整 著作 的 缺失 不 能 不 说 是 一 个 遗憾 。 


本 书 的 英文 版 在 2016 年 8 月 30 日 正式 出 版 ， 一 如 既往 保持 了 Zakas 的 一 贯 水 准 。 组 织 结构 
比较 合理 ， 并 不 完全 是 罗列 新 特性 ， 而 是 有 侧重 点 地 进行 介绍 。 同 时 在 介绍 某 些 特性 时 ， 还 
会 特别 提醒 读者 其 中 的 范例 运行 效率 不 高 ， 可 考虑 用 其 他 方式 实现 ， 体 现 出 作者 负责 任 的 态 
度 。 此 外 ， 在 不 少 地 方 还 会 讲述 新 标准 的 制定 背景 ， 有 的 是 因为 原 有 功能 缺乏 ， 有 的 是 旧版 


ES 有 坑 容 易 误 踩 ， 因 此 有 些 新 标准 才 顺 应 形势 得 以 出 台 。 如 果 认 真 学 习 此 书 ， 不 但 对 了 解 并 
使 用 ES6 有 帮助 ， 也 会 有 助 于 规避 JS 的 一 些 昌 坑 。 最 后 ， 此 书 在 附录 部 分 对 ES2016 也 作 
了 介绍 a 


IN Ae 


即使 像 《 JS 高 级 编程 》 这 样 的 经 典 著作 ， 也 会 存在 一 些 问题 。 例 如 原 书 对 于 闭 包 的 定义 我 个 
人 就 觉得 很 不 满意 。 其 定义 不 能 说 是 错 的 ， 但 有 两 个 问题 : 1、 用 词 有 二 义 性 ;2、 太 过 简 
略 ， 没 有 在 定义 中 体现 出 JS A é gA EARE o 


相应 的 ， 本 书 也 存在 一 些 问 题 。 


1. 代码 或 引用 内 容 中 存在 一 些 笔 误 。 

2. 有 些 描述 不 符合 浏览 器 的 实际 情况 ， 这 也 许 是 浏览 器 对 规范 标准 的 支持 有 偏差 。 

3. 有 少数 错误 ， 这 在 译文 中 都 有 标注 ， 但 可 能 还 有 译 者 所 未 发 现 的 。 同 时 因为 翻译 全 书 确 
实 比 较 累 ， 所 以 有 些 范例 代码 我 比较 快 地 跳 过 去 了 ， 没 有 特别 仔细 看 。 如 果 读者 发 现 有 
错 ， 可 以 在 此 处 提出 ， 也 可 以 到 原作 者 的 github 上 去 提交 issue (但 是 原作 者 回应 可 能 
不 会 太 及 时 ) 。 

4. 有些 内 容 讲 述 得 不 够 完整 ， 例 如 Promise 链 的 问题 。 在 比较 长 的 链 中 ， 如 果 中 间 抛 出 了 
一 个 错误 ， 而 这 个 错误 没有 被 catch() 及 时 捕获 ， 就 会 沿 着 整个 链 继续 向 下 传递 ， 跳 过 
链 中 的 所 有 then) 处 理 ， 直 到 遇 到 catch() 为 止 ， 或 是 静默 失败 (链条 下 方 没 有 任何 
拒绝 处 理 的 情况 下 ) 。 这 一 点 在 原 书 中 并 没有 明确 进行 描述 ， 这 是 让 我 觉得 美中不足 的 
地 方 。 而 且 关 于 Promise 链 ， 原 书 的 范例 都 太 简单 了 ， 除 上 述 所 提 的 内 容 外 ， 其 实 还 有 
更 多 可 讲 的 。 
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引言 


The JavaScript core language features are defined in a standard called ECMA-262. The 
language defined in this standard is called ECMAScript. What you know as JavaScript in 
browsers and Node.js is actually a superset of ECMAScript. Browsers and Node.js add more 
functionality through additional objects and methods, but the core of the language remains 
as defined in ECMAScript. The ongoing development of ECMA-262 is vital to the success of 
JavaScript as a whole, and this book covers the changes brought about by the most recent 
major update to the language: ECMAScript 6. 


e 通 往 ES6 之 路 
© 关于 本 书 
o 浏览 器 与 Node.js 的 兼容 性 
o 本 书 读者 对 象 
o 概述 
o 排版 约定 
o 帮助 与 支持 
e 致谢 


通 往 ES6 之 路 


In 2007, JavaScript was at a crossroads. The popularity of Ajax was ushering in a new age 
of dynamic web applications, while JavaScript hadn’t changed since the third edition of 
ECMA-262 was published in 1999. TC-39, the committee responsible for driving the 
ECMAScript development process, put together a large draft specification for ECMAScript 4. 
ECMAScript 4 was massive in scope, introducing changes both small and large to the 
language. Updated features included new syntax, modules, classes, classical inheritance, 
private object members, optional type annotations, and more. 


The scope of the ECMAScript 4 changes caused a rift to form in TC-39, with some members 
feeling that the fourth edition was trying to accomplish too much. A group of leaders from 
Yahoo, Google, and Microsoft created an alternate proposal for the next version of 
ECMAScript that they initially called ECMAScript 3.1. The “3.1” was intended to show that 
this was an incremental change to the existing standard. 


ECMAScript 3.1 introduced very few syntax changes, instead focusing on property 
attributes, native JSON support, and adding methods to already-existing objects. Although 
there was an early attempt to reconcile ECMAScript 3.1 and ECMAScript 4, this ultimately 
failed as the two camps had difficulty with the very different perspectives on how the 
language should grow. 


In 2008, Brendan Eich, the creator of JavaScript, announced that TC-39 would focus its 
efforts on standardizing ECMAScript 3.1. They would table the major syntax and feature 
changes of ECMAScript 4 until after the next version of ECMAScript was standardized, and 
all members of the committee would work to bring the best pieces of ECMAScript 3.1 and 4 
together after that point into an effort initially nicknamed ECMAScript Harmony. 


ECMAScript 3.1 was eventually standardized as the fifth edition of ECMA-262, also 
described as ECMAScript 5. The committee never released an ECMAScript 4 standard to 
avoid confusion with the now-defunct effort of the same name. Work then began on 
ECMAScript Harmony, with ECMAScript 6 being the first standard released in this new 
“harmonious” spirit. 


ECMAScript 6 reached feature complete status in 2015 and was formally dubbed 
“ECMAScript 2015.” (But this text still refers to it as ECMAScript 6, the name most familiar to 
developers.) The features vary widely from completely new objects and patterns to syntax 
changes to new methods on existing objects. The exciting thing about ECMAScript 6 is that 
all of its changes are geared toward solving problems that developers actually face. 


关于 本 书 


A good understanding of ECMAScript 6 features is key for all JavaScript developers going 
forward. The language features introduced in ECMAScript 6 represent the foundation upon 
which JavaScript applications will be built for the foreseeable future. That’s where this book 
comes in. My hope is that you'll read this book to learn about ECMAScript 6 features so that 
you'll be ready to start using them as soon as you need to. 


浏览 器 与 Node js 的 兼容 性 


Many JavaScript environments, such as web browsers and Node.js, are actively working on 
implementing ECMAScript 6. This book doesn’t attempt to address the inconsistencies 
between implementations and instead focuses on what the specification defines as the 
correct behavior. As such, it’s possible that your JavaScript environment may not conform to 
the behavior described in this book. 


本 书 读者 对 象 


This book is intended as a guide for those who are already familiar with JavaScript and 
ECMAScript 5. While a deep understanding of the language isn’t necessary to use this book, 
it will help you understand the differences between ECMAScript 5 and 6. In particular, this 


book is aimed at intermediate-to-advanced JavaScript developers programming for a 
browser or Node.js environment who want to learn about the latest developments in the 
language. 


This book is not for beginners who have never written JavaScript. You will need to have a 
good basic understanding of the language to make use of this book. 


概述 


Each of this book's thirteen chapters covers a different aspect of ECMAScript 6. Many 
chapters start by discussing problems that ECMAScript 6 changes were made to solve, to 
give you a broader context for those changes, and all chapters include code examples to 
help you learn new syntax and concepts. 


Chapter 1: How Block Bindings Work talks about let and const , the block-level 
replacement for var . 


Chapter 2: Strings and Regular Expressions covers additional functionality for string 
manipulation and inspection as well as the introduction of template strings. 


Chapter 3: Functions in ECMAScript 6 discusses the various changes to functions. This 
includes the arrow function form, default parameters, rest parameters, and more. 


Chapter 4: Expanded Object Functionality explains the changes to how objects are 
created, modified, and used. Topics include changes to object literal syntax, and new 
reflection methods. 


Chapter 5: Destructuring for Easier Data Access introduces object and array 
destructuring, which allow you to decompose objects and arrays using a concise syntax. 


Chapter 6: Symbols and Symbol Properties introduces the concept of symbols, a new 
way to define properties. Symbols are a new primitive type that can be used to obscure (but 
not hide) object properties and methods. 


Chapter 7: Sets and Maps details the new collection types of set , weakSet , Map , and 
WeakMap . These types expand on the usefulness of arrays by adding semantics, de-duping, 
and memory management designed specifically for JavaScript. 


Chapter 8: Iterators and Generators discusses the addition of iterators and generators to 
the language. These features allow you to work with collections of data in powerful ways that 
were not possible in previous versions of JavaScript. 


Chapter 9: Introducing JavaScript Classes introduces the first formal concept of classes 
in JavaScript. Often a point of confusion for those coming from other languages, the addition 
of class syntax in JavaScript makes the language more approachable to others and more 


concise for enthusiasts. 


Chapter 10: Improved Array Capabilities details the changes to native arrays and the 
interesting new ways they can be used in JavaScript. 


Chapter 11: Promises and Asynchronous Programming introduces promises as a new 
part of the language. Promises were a grassroots effort that eventually took off and gained in 
popularity due to extensive library support. ECMAScript 6 formalizes promises and makes 
them available by default. 


Chapter 12: Proxies and the Reflection API introduces the formalized reflection API for 
JavaScript and the new proxy object that allows you to intercept every operation performed 
on an object. Proxies give developers unprecedented control over objects and, as such, 
unlimited possibilities for defining new interaction patterns. 


Chapter 13: Encapsulating Code with Modules details the official module format for 
JavaScript. The intent is that these modules can replace the numerous ad-hoc module 
definition formats that have appeared over the years. 


Appendix A: Smaller ECMAScript 6 Changes covers other changes implemented in 
ECMAScript 6 that you'll use less frequently or that didn’t quite fit into the broader major 
topics covered in each chapter. 


Appendix B: Understanding ECMAScript 7 (2016) describes the two additions to the 
standard that were implemented for ECMAScript 7, which didn’t impact JavaScript nearly as 
much as ECMAScript 6. 


排版 约定 
The following typographical conventions are used in this book: 


e Italics introduces new terms 
e Constant width indicates a piece of code or filename 


Additionally, longer code examples are contained in constant width code blocks such as: 


function Something() { 


Within a code block, comments to the right of a console.1log() statement indicate the output 
you'll see in the browser or Node.js console when the code is execute, for example: 


console.log("Hi"); 


If a line of code in a code block throws an error, this is also indicated to the right of the code: 


doSomething(); 


帮助 与 支持 


You can file issues, suggest changes, and open pull requests against this book by visiting: 
https://github.com/nzakas/understandinges6 


If you have questions as you read this book, please send a message to my mailing list: 
http://groups.google.com/group/zakasbooks. 
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第 一 章 RARE 


变量 声明 的 工作 机 制 历来 是 JS 编程 中 最 微妙 的 部 分 之 一 。 在 大 多 数 类 C 语言 中 ， 变 量 (或 
绑 定 ) 总 是 在 它 被 声明 的 地 方 创建 。 然 而 JS 例外 ， 变 量 实际 创建 的 位 置 取决 于 你 如 何 声明 
它 ， 为 此 ES6 提供 了 新 特性 以 便 能 更 好 地 控制 变量 的 作用 域 。 本 章 会 演示 传统 的 var 声明 
为 何 会 今 人 困惑 ， 并 介绍 ES6 的 块 级 绑 定 ， 然 后 再 给 出 一 些 相关 的 最 佳 实践 。 


e var 声明 与 变量 提升 

e 块 级 声明 

o let 声明 

o 禁止 重复 声明 

o 常量 声明 
a 对 比 常量 声明 与 let 声明 
= 使 用 const 声明 对 象 

o 暂时 性 死 区 

循环 中 的 块 级 绑 定 

。 循环 内 的 函数 

o 循环 内 的 let 声明 

o 循环 内 的 常量 声明 

全 局 块 级 绑 定 

块 级 绑 定 新 的 最 佳 实践 


gk 


e Sia 


var 声明 与 变量 提升 


使 用 var 关键 字 声 明 的 变量 ， 无 论 其 实际 声明 位 置 在 何 处 ， 都 会 被 视 为 声明 于 所 在 也 数 的 顶 
部 (如 果 声 明 不 在 任意 函数 内 ， 则 视 为 在 全 局 作用 域 的 顶部 ) 。 这 就 是 所 谓 的 变量 提升 ( 
hoisting ) 。 请 参考 如 下 函数 定义 来 理解 变量 提升 : 


function getValue(condition) { 


if (condition) { 
var value = "blue"; 


// 其 他 代码 


return value; 
} else { 


// value 在 此 处 可 访问 ， 值 为 undefined 


return null; 


// value 在 此 处 可 访问 ， 值 为 undefined 


如 果 你 不 太 熟悉 JS ， 或 许 会 认为 仅 当 condition 的 值 为 true 时 ， 变 量 value TAKE 
建 。 但 实际 上 ， value 无 论 如 何 都 会 被 创建 。 JS 引擎 会 默默 地 将 getvalue 函数 调整 为 如 
下 形式 : 

function getValue(condition) { 


var value; 


if (condition) { 
value = "blue"; 


// 其 他 代码 


return value; 
} else { 


return null; 


value 变量 的 声明 被 提升 到 了 遂 数 顶部 ， 而 初始 化 操作 则 保留 在 原 处 。 意味 着 在 else 分 
XA value 变量 也 是 可 访问 的 ， 在 此 处 它 的 值 并 未 被 初始 化 ， 因 此 是 undefined ° 


JS 的 初学 者 经 常 需要 花 点 时 间 才 能 习惯 变量 提升 ， 而 若 不 理解 这 种 特有 行为 ， 就 可 能 导致 程 
序 bug。 正 因 如 此 ，ES6 引入 了 块 级 作用 域 ， 让 变量 的 生命 周期 更 加 可 控 。 


块 级 声明 


块 级 声明 也 就 是 让 所 声明 的 变量 在 指定 块 的 作用 域外 无 法 被 访问 。 块 级 作用 域 (又 被 称 为 词 
法 作用 域 ) 在 如 下 情况 被 创建 : 


1. 在 一 个 函数 内 部 
2， 在 一 个 由 一 对 花 括 号 包 计 的 代码 块 内 部 


块 级 作用 域 是 很 多 类 C 语言 的 工作 机 制 ， ES6 引入 块 级 声明 ， 是 为 了 给 JS 添加 灵活 性 ， 并 
保证 与 其 他 语言 的 一 致 性 。 
let 声明 


let 声明 的 语法 与 var 的 语法 一 致 。 大 体 上 可 以 直接 用 let 代替 var 进行 变量 声明 ， 但 
会 将 变量 的 作用 域 限制 在 当前 代码 块 中 (其 他 细微 差别 会 在 稍 后 讨论 ) 。 由 于 let 声明 并 不 
会 被 提升 ， 因 此 若 想 让 变量 在 整个 代码 块 内 部 可 用 ， 需 要 手动 将 let 声明 放置 到 代码 块 顶 
部 。 此 处 有 个 范例 : 


function getValue(condition) { 


if (condition) { 
let value = "blue"; 


Hii ae 他 代 码 


return value; 
} else { 


// Value 在 此 处 不 可 用 


return null; 


} 


// value 在 此 处 不 可 用 


这 种 写法 的 getValue 函数 的 行为 更 接近 其 他 类 C 语言 ， 合乎 预期 。 由 于 变量 value 声明 
使 用 的 是 let 而 非 var ， 该 声明 就 没有 被 提升 到 函数 定义 的 顶部 ， 因 此 变量 value 在 
if 代码 块 之 外 就 无 法 访问 ; 并 且 在 condition 的 值 为 false 时 ， 该 变量 永远 不 会 被 声明 并 
初始 化 。 


禁止 重复 声明 


如 果 一 个 标识 符 已 经 在 代码 块 内 部 被 定义 ， 那 么 在 此 代码 块 内 使 用 同一 个 标识 符 进 行 let F 
明 就 会 导致 错误 。 例 如 : 


var count = 30; 
// 语法 错误 


let count = 40; 


EAB P > cont 变量 被 声明 了 两 次 : 一 次 使 用 var > A-KREA let AA let 不 能 
在 同一 作用 域内 重复 声明 一 个 已 有 标识 符 ， 此 处 的 let 声明 就 会 抛 出 错误 。 然 而 ， 在 吝 套 的 
作用 域内 使 用 let 声明 一 个 同名 新 变量 ， 就 不 会 有 问题 ， 以 下 代码 对 此 进行 了 演示 : 


var count = 30; 


// 不 会 抛 出 错误 
if (condition) { 


let count = 40; 


// 其 他 代码 


此 处 的 let 声明 并 没有 抛 出 错误 ， 这 是 由 于 它 并 不 是 在 同一 作用 域 级 别 再 次 创建 count X 
量 ， 而 是 在 if 语句 内 部 创建 新 变量 。 在 if 代码 块 内 部 ， 这 个 新 变量 会 屏蔽 全 局 的 
count 变量 ， 从 而 在 局 部 阻止 对 于 后 者 的 访问 。 


eee 
在 ES6 中 里 也 可 以 使 用 const 语法 进行 声明 。 使 用 const 声明 的 变量 会 被 认为 是 常量 ( 
constant ) ， 意 味 着 它们 的 值 在 被 设置 完成 后 就 不 允许 再 被 更 改 。 正 因 如 此 ， 所 有 的 const 
变量 都 需要 在 声明 时 进行 初始 化 ， 示 例如 下 : 


/ i 
// ABN hE 


const maxItems = 30; 

// 语法 错误 : 未 进行 初始 化 

const name; 

maxItems 变量 在 声明 时 被 初始 化 ， 因 此 它 的 const 声明 是 有 效 的 。 而 name 变量 缺少 了 初 
始 化 操作 ， 试 图 运行 这 段 代 码 就 会 抛 出 错误 。 
对 比 常量 声明 与 let 声明 
常量 声明 与 let 声明 一 样 ， 都 是 块 级 声明 。 这 意味 着 常量 在 声明 它们 的 语句 块 之 外 是 无 法 被 
访问 的 ， 并 且 声 明 也 不 会 被 提升 ， 示 例如 下 : 


if (condition) { 
const maxItems 


ll 
ol 


// 其 他 代码 
// maxItems 在 此 处 无 法 访问 


在 此 代码 中 ， 常 量 maxItems 在 if 语句 内 被 声明 ， 随 着 语句 执行 完毕 ， maxItems 在 代码 
块 外 部 就 不 再 可 用 o 


const P 明 与 let 的 另 一 个 相似 点 是 : 在 同一 作用 域内 定义 一 个 已 有 变量 时 会 抛 出 错误 > 
无 论 是 在 全 局 还 是 函数 作用 域 ， 无 论 该 变量 此 前 是 用 var 声明 的 ， 还 是 用 let 声明 的 。 例 
如 以 下 代码 : 


var message = "Hello!"; 
let age = 25; 


// 二 者 均 会 抛 出 错误 


const message = "Goodbye!"; 
const age = 30; 


两 个 const 声明 独立 来 看 都 是 有 效 的 ， 但 在 前 面 已 存在 var 5 let 声明 的 情况 下 ， 它 们 
都 会 出 问题 。 


尽管 有 上 述 相 似 之 处 ， 但 let 与 const 之 间 仍 有 一 个 本 质 区 别 ， 试 图 对 const 声明 的 常 
量 再 次 赋值 会 抛 出 错误 ， 无 论 是 否 运 行 在 严格 模式 下 : 

const maxItems = 5; 

maxItems = 6; // 抛 出 错误 
与 其 他 语言 的 常量 类 似 ， maxItems 变量 不 能 被 再 次 赋值 。 然 而 不 同 之 处 在 于 ，JS 的 常量 若 
是 一 个 对 象 ， 它 所 包含 的 值 是 可 以 被 修改 的 。 
使 用 const 声明 对 象 


const 声明 会 阻止 对 于 变量 绑 定 与 变量 自身 值 的 修改 ， 这 意味 着 它 并 不 会 阻止 对 变量 成 员 的 
修改 。 例 如 : 


const person = { 
name: "Nicholas" 


}; 


I TAPER 
person.name = "Greg"; 
// 抛 出 错误 
person = { 


name: "Greg" 


}; 


此 处 person 在 初始 化 时 被 绑 定 为 带 有 单个 属性 的 对 象 。 修 改 person.name 并 不 会 抛 出 错 
误 ， 因 为 该 操作 只 修改 了 person 对 象 的 成 员 ， 而 没有 修改 person 的 绑 定 值 。 当 代码 试图 
为 person 对 象 自身 赋值 ， 即 试图 更 改变 量 绑 定时 ， 就 会 导致 错误 。 cont 在 变量 方面 的 微 
妙 工 作 机 制 容易 被 误解 ， 但 仅 需 牢记 : const 阻止 的 是 对 于 变量 绑 定 的 修改 ， 而 不 阻止 对 成 
员 值 的 修改 。 


暂时 性 死 区 


使 用 let 或 const 声明 的 变量 ， 在 达到 声明 位 置 之 前 都 是 无 法 访问 的 ， 试 图 访问 会 导致 一 
个 引用 错误 ， 即 便 所 用 的 操作 通常 是 安全 的 ， 例 如 使 用 typeof 运算 符 。 示 例如 下 : 


if (condition) { 
console.log(typeof value); // 引用 错误 
let value = "blue"; 


此 处 的 value 变量 使 用 了 let 进行 定义 与 初始 化 ， 但 该 语句 永远 不 会 被 执行 ， 因 为 声明 之 
前 的 那 行 代码 抛 出 了 一 个 错误 。 出 现 该 问题 是 因为 value 位 于 被 JS 社区 称 为 暂时 性 死 区 ( 
temporal dead zone ，TDZ ) 的 区 域内 。 该 名 称 并 未 在 ECMAScript 规范 中 被 明确 命名 ， 
但 经 常 被 用 于 描述 let 或 const 声明 的 变量 为 何在 声明 位 置 之 前 无 法 被 访问 。 本 小 节 描 述 
的 是 暂时 性 死 区 导致 的 声明 位 置 的 微妙 之 处 ， 尽管 此 处 使 用 的 都 是 let ? 但 替换 为 const 
也 不 例外 。 


当 JS 引擎 扫描 接 下 来 的 代码 块 并 发 现 变量 声明 时 ， 它 会 在 处 理 var 时 将 声明 提升 到 函数 或 
全 局 作用 域 的 顶部 ， 而 处 理 let 或 const 时 ， 则 会 将 声明 放 入 暂时 性 死 区 。 任 何在 暂时 性 
死 区 内 访问 变量 的 企图 都 会 导致 “运行 时 ”错误 (runtime error) 。 只 有 执行 到 变量 的 声明 语句 
时 ， 该 变量 才 会 从 暂时 性 死 区 内 被 移 除 ， 才 可 以 安全 使 用 。 

使 用 let 或 const 声明 的 变量 都 无 法 规避 暂时 性 死 区 。 而 且 正 如 上 例 所 演示 的 ， 这 甚至 影 
响 了 通常 安全 的 typeof 运算 符 。 不 过 可 以 在 变量 被 定义 的 代码 块 之 外 对 该 变量 使 用 

typeof ， 尽 管 其 结果 可 能 并 非 预 期 。 参 考 如 下 代码 : 


console.log(typeof value); // “undefined" 
if (condition) { 


let value = "blue"; 


} 


typeof 运算 符 被 用 于 value 变量 被 定义 的 代码 块 外 部 ， 此 时 value 并 未 在 暂时 性 死 区 
内 。 这 意味 着 value 变量 绑 定 尚 不 存在 ， 而 typeof 仅 会 单纯 返回 "undefined" ° 


暂时 性 死 区 只 是 块 级 绑 定 的 一 个 独特 表现 ， 而 另 一 个 独特 表现 则 是 在 循环 内 使 用 它 。 


HERP IRB 


开发 者 或 许 最 期 望 在 for 循环 内 使 用 块 级 作用 域 ， 也 就 是 想 让 一 次 性 的 循环 计数 器 仅 能 在 特 
环 内 部 使 用 。 如 下 代码 在 JS 中 并 不 罕见 : 


Ole {(Avelie al = (0/8 al ce alloys an 


process(items[i]); 


} 
// i 在 此 处 仍然 可 被 访问 
console.log(i); // 10 


在 其 他 默认 使 用 块 级 作用 域 的 语言 中 ， 这 个 例子 能 够 照 预 期 工作 ， 也 就 是 只 有 for 语句 才能 
访问 变量 i 。 然 而 在 JS 中， 由 于 va 声明 导致 了 变量 提升 ， 循 环 结束 后 i 仍然 可 被 访 
问 。 若 像 如 下 代码 那样 改 用 let ， 就 会 看 到 预期 行为 : 

how (Cle take = 0 < 0 Lt 


process(items[i]); 


} 


// i 在 此 处 不 可 访问 ， 抛 出 错误 
console.log(i); 


本 例 中 的 变量 i 仅 在 tor 循环 内 部 可 用 ， 一 旦 循环 结束 ， 该 变量 在 任意 位 置 都 不 可 访问 。 


循环 内 的 函数 


长 期 以 来 ， var 的 特点 使 得 循环 变量 在 循环 作用 域 之 外 仍然 可 被 访问 ， 于 是 在 循环 内 创建 函 
数 就 会 产生 问题 。 考 虑 如 下 代码 : 


var funcs = []; 


umole (Welle sh 0 ab << allelh Aine) af 
funcs.push(function() { console.log(i); }); 


} 


funcs.forEach(function(func) { 
func(); // 输出 数值 "10" 十 次 
}); 


你 原本 可 能 预期 这 段 代 码 会 输出 0 到 9 的 数值 ， 但 它 却 在 同一 行将 数值 10 输出 了 十 次 。 这 是 


因为 变量 i 在 循环 的 每 次 迭代 中 都 被 共享 了 ， 意 味 着 循环 内 创建 的 那些 函数 都 拥有 对 于 同一 
变量 的 引用 。 在 循环 结束 后 ， 变 量 i 的 值 会 是 10 ， 因 此 当 console.log(i) 被 调用 时 ， 
每 次 都 打印 出 10 。 

为 了 修正 这 个 问题 ， 开 发 者 在 循环 内 使 用 立即 调用 函数 表达 式 (IIFEs) ， 以 便 在 每 次 迭代 中 
强制 创建 变量 的 一 个 新 副本 ， 示 例如 下 : 


var funcs = []; 


TOG (Wale as = 10-9 a < AO at) 
funcs.push((function(value) { 
return function() { 


console.log(value); 


} 
}(1))); 
} 
funcs.forEach(function(func) { 
func(); // 从 0 到 9 依次 输出 
}); 


这 种 写法 在 循环 内 使 用 了 IIFE co RS i 被 传递 给 上 FE ， 从 而 创建 了 作为 副本 的 value X 
量 ? 每 个 value 都 存储 着 每 次 迭代 时 变量 i 的 值 2 ARP AY BAK A 这 些 值 副本 在 循环 
从 0 到 9 的 过 程 中 每 次 都 能 输出 预期 结果 。 幸 运 的 是 ， 使 用 let 与 const 的 块 级 绑 定 可 以 
在 ES6 中 简化 这 种 写法 。 


循环 内 的 let 声明 


let 声明 通过 有 效 模仿 上 例 中 |IFE 的 作用 而 简化 了 循环 。 在 每 次 和 迭代 中 ， 都 会 创建 一 个 新 的 
同名 变量 并 对 其 进行 初始 化 。 这 意味 着 你 可 以 完全 省 略 IFE 而 获取 预期 的 结果 ， 就 像 这 样 : 


var funcs = []; 


fom (let I= 0 3 < 10 itt) 4 
funcs.push(function() { 
console.log(i); 

}); 
} 


funcs.forEach(function(func) { 
func(); // 从 0 到 9 依次 输出 
D) 


与 使 用 var PARA IFE 相 比 ， 这 里 代码 能 达到 相同 效果 ， 但 无 疑 更 加 简洁 。 在 循环 中 
let 声明 每 次 都 创建 了 一 个 新 的 i 变量， 并 赋 子 了 正确 的 值 ， 于 是 在 循环 内 部 创建 的 函数 
都 获得 了 各 自 的 i 副本 。 这 种 方式 在 for-in 和 for-of 循环 中 同样 适用 ， 如 下 所 示 : 


var funcs = [], 


object = { 
as Brue, 
b: true, 
CU 
}; 


for (let key in object) { 
funcs.push(function() { 
console.log(key); 
H); 
} 


funcs.forEach(function(func) { 
func(); Wie PERE a Meise Uo ss West 


3); 


本 例 中 的 for-in 循环 的 行为 与 for 循环 一 致 。 每 次 循环 都 创建 一 个 新 的 key 变量 绑 定 ， 
因此 每 个 函数 都 能 够 拥有 它 自身 的 key 变量 副本 ， 结 果 每 个 函数 都 输出 了 各 自 不 同 的 值 。 而 
若 使 用 var 来 声明 key ， 则 所 有 函数 都 只 会 输出 "o" o 


需要 着 重 了 解 的 是 : let 声明 在 循环 内 部 的 行为 是 在 规范 中 特别 定义 的 ， 与 不 提升 变量 
声明 的 特征 没有 必然 联系 。 事 实 上 ， 在 早期 let 的 实现 中 并 没有 这 种 行为 ， 后 来 才 增 
加 。 


循环 内 的 第 量 声 明 


ES6 规范 没有 明确 禁止 在 循环 中 使 用 const 声明 ， 然 而 它 会 根据 不 同 循 环 方式 而 有 不 同行 
为 。 在 常规 的 for 循环 中 ， 你 可 以 在 初始 化 时 使 用 const ， 但 循环 会 在 试图 改变 该 变量 的 
值 时 抛 出 错误 。 例 如 : 


var funcs = []; 


// 在 一 次 迭代 后 抛 出 错误 
fon (const =0.0 1 < 10; 1t) y 
funcs.push(function() { 
console.log(i); 


F): 


在 此 代码 中 ， i 被 声明 为 一 个 常量 。 循 环 的 第 一 次 迭代 成 功 执行 ， 此 时 i 的 值 为 0。 在 
i++ 执行 时 ， 一 个 错误 会 被 抛 出 ， 因 为 该 语句 试图 更 改 常量 的 值 。 因 此 ， 在 循环 中 你 只 能 使 
用 const 来 声明 一 个 确定 不 会 被 更 改 的 变量 。 


而 另 一 方面 ， Const 变量 在 for-in 或 for-of 循环 中 使 用 时 ， 与 let 变量 效果 相同 2 
此 下 面 代码 不 会 导致 出 错 : 


var funcs = [], 


object = { 
a: true, 
b: true, 
CG Ere 
}; 
// 不 会 导致 错误 


for (const key in object) { 
funcs.push(function() { 
console.log(key); 
3); 
} 


funcs.forEach(function(func) { 
func(); Lf tea Va" = "bts wes 


3); 


这 段 代码 与 “循环 内 的 let 声明 ?小节 的 第 二 个 例子 几乎 完全 一 样 ， 唯 一 的 区 别 是 key 的 值 在 
循环 内 不 能 被 更 改 。 const 能 够 在 for-in 与 for-of 循环 内 工作 ， 是 因为 循环 为 每 次 挝 
代 创 建 了 一 个 新 的 变量 绑 定 ， 而 不 是 像 for 循环 那样 试图 去 修改 已 绑 定 的 变量 的 值 。 


DARRAR E 


let 与 const 不 同 于 var 的 另 一 个 方面 是 在 全 局 作用 域 上 的 表现 。 当 在 全 局 作用 域 上 使 
用 var 时 ， 它 会 创建 一 个 新 的 全 局 变量 ， 并 成 为 全 局 对 象 (在 浏览 器 中 是 window ) 的 一 
个 属性 。 这 意味 着 使 用 var 可 能 会 无 意 中 履 盖 一 个 已 有 的 全 局 属性 ， 就 像 这 样 : 


// 在 浏览 器 中 
Vals RegExp = cHe tioni 


console. log(window.RegExp) ; Hf Miya tesibilay 
var mez = "Hil"; 
console. log(window.ncz); ip Nahe 


尽管 全 局 的 RegExp 是 定义 在 window 上 的 ， 它 仍然 不 能 防止 被 var 重 写 。 这 个 例子 声明 

了 一 个 新 的 全 局 变量 RegExp MHATRAN HR? RMN? ncz 定义 为 全 局 变量 后 就 立即 

成 为 了 window 的 一 个 属性 。 这 就 是 JS 通常 的 工作 方式 ° 

然而 若 你 在 全 局 作用 域 上 使 用 let 或 const ， 虽 然 在 全 局 作用 域 上 会 创建 新 的 绑 定 ， 但 不 


会 有 任何 属性 被 添加 到 全 局 对 象 上 。 这 也 就 意味 着 你 不 能 使 用 let 或 const 来 覆盖 一 个 全 
局 变量 ， 你 只 能 将 其 遮 项。 此 处 有 个 范例 : 


// 在 浏览 器 中 

let RegExp = emon > 

console.log(RegExp); // “Hello 
console.log(window.RegExp === RegExp); // false 
const ncz = "Hi!"; 

console.log(ncz); Hap Naa 
console.log("ncez" in window); // false 


此 代码 的 let 声明 创建 了 regexp 的 一 个 绑 定 ， 并 遮蔽 了 全 局 的 RegExp ° RRA 
window.RegExp 与 RegExp 是 不 同 的 ， 因此 全 局 作用 域 没 有 被 污染 o 同样 ， const Ë 明 创 建 
了 ncz 的 一 个 绑 定 ， 但 并 未 在 全 局 对 象 上 创建 属性 。 若 你 不 想 在 全 局 对 象 上 创建 属性 ， 使 用 


let 与 Const 会 更 安全 。 


若 想 让 代码 能 从 全 局 对 象 中 被 访问 ， 你 仍然 需要 使 用 var 。 这 种 做 法 常见 于 在 浏览 器 中 
跨越 帧 或 窗口 去 访问 代码 的 场合 。 


块 级 绑 定 新 的 最 佳 实践 


在 ES6 的 开发 阶段 ， 被 广泛 认可 的 变量 声明 方式 是 : 默认 情况 下 应 当 使 用 let 来 代替 var 
。 对 于 多 数 JS 开发 者 来 说 ， let 的 行为 方式 正 是 var 本 应 有 的 方式 ， 因 此 直接 用 tet 
替代 var 更 符合 逻辑 。 在 这 种 情况 下 ， 需 要 受到 保护 的 变量 再 使 用 const ° 


然而 ， 随 着 更 多 的 开发 者 迁移 到 ES6 上 ， 一 种 替代 方案 变 得 更 为 流行 : 在 默认 情况 下 使 用 
const ， 仅 当 明 确 变 量 值 需要 被 更 改 的 情况 下 才 使 用 let 。 其 理论 依据 是 大 部 分 变量 在 初 
始 化 之 后 都 应 当 保持 不 变 ， 因 为 预期 外 的 改动 是 bug 的 源头 之 一 。 这 种 理念 有 着 足够 强大 的 
吸引 力 ， 值 得 在 你 使 用 ES6 之 后 依 此 进行 实践 。 


ÈK 
Wy 
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let 与 const 块 级 绑 定 将 词法 作用 域 引 入 了 JS 。 这 两 种 声明 方式 都 不 会 进行 提升 ， 并 且 
仅 在 声明 它们 的 代码 块 内 部 可 用 。 这 样 变量 就 能 够 在 必要 位 置 被 准确 声明 ， 其 表现 更 加 接近 
其 他 语言 ， 并 且 能 减少 无 心 之 失 。 作 为 一 个 副作用 ， 你 不 能 在 变量 声明 位 置 之 前 访问 它们 ， 
即便 使 用 的 是 typeof 这 样 的 安全 运算 符 。 由 于 块 级 绑 定 存在 暂时 性 死 区 (TDZ) ， 试 图 在 

声明 位 置 之 前 访问 它 就 会 导致 错误 。 


let 与 const 的 表现 在 很 多 情况 下 都 相似 于 var ， 然 而 在 循环 中 就 有 差异 。 在 for-in 与 
for-of 循环 中 ， let 与 const 都 能 在 每 一 次 迭代 时 创建 一 个 新 的 绑 定 ， 这 意味 着 在 循环 
体内 创建 的 函数 可 以 使 用 当前 和 迭代 所 绑 定 的 循环 变量 值 ， 而 不 是 像 使 用 var 那样 ， 统 一 使 用 
循环 结束 时 的 变量 值 。 在 for 循环 中 使 用 let 声明 时 也 是 如 此 ， 不 过 在 for 循环 中 使 用 
const 声明 则 会 导致 错误 。 


块 级 绑 定 当前 的 最 佳 实践 就 是 : 在 默认 情况 下 使 用 const ， 而 仅 在 变量 值 确实 需要 被 更 改 的 
情况 下 才 使 用 let 。 这 在 代码 中 能 确保 基本 的 不 可 变性 ， Pe 上 类 型 的 错误 。 


第 二 草 字符 串 与 正则 衣 达 式 


字符 串 可 以 说 是 编程 中 最 重要 的 数据 类 型 之 一 。 它 们 在 几乎 所 有 高 级 语言 中 存在 ， 有 效 运用 
便 能 编写 出 有 用 的 程序 。 由 此 扩展 出 的 正则 表达 式 也 十 分 重要 ， 因 为 它们 给 了 开发 者 更 多 操 
纵 字 符 串 的 能 力 。 基 于 这 些 事实 ， ES6 的 创造 者 加 强 了 字符 串 与 正则 表达 式 ， 为 它们 添加 了 
新 的 能 力 ， 并 补充 了 一 些 长 期 缺失 的 功能 。 本 章 会 介绍 这 些 变化 。 


e 更 好 的 Unicode 支持 
o UTF-16 码 点 
o codePointAt() 方法 
o String.fromCodePoint() 方法 
normalize() 方法 
正则 表达 式 U 标志 
 U 标志 实例 
ae 计算 码 点 数量 
a 判断 是 否 支持 U 标志 
。 字符 串 的 其 他 改动 
o 识别 子 字 符 串 的 方法 
o repeat() 方法 
。 正则 表达 式 的 其 他 改动 
o 正则 表达 式 y 标志 
o 复制 正则 表达 式 
o flags 属 性 
© 模板 字面 量 
@ 基本 语法 
o SIT FHF 
= ES6 之 前 的 权宜 之 计 
m 多 行 字符 串 的 简单 解决 方法 
o 产生 替换 位 
o 标签 化 模板 
a 定义 标签 
a 使 用 模板 字面 量 中 的 原始 值 


O 
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更 好 的 Unicode 支持 


在 ES6 之 前 ，JS 的 字符 串 以 16 位 字符 编码 ( UCS-2 ) 为 基础 。 每 个 16 位 序列 都 是 一 个 
码 元 ( codeunit) ， 用 于 表示 一 个 字符 。 字 符 串 所 有 的 属性 与 方法 都 基于 16 位 的 码 元 ， 例 
如 length 属性 与 charat() 方法 。 当 然 ，16 位 曾经 足以 容纳 任何 字符 ， 然 而 由 于 Unicode 


引入 了 扩展 字符 集 ， 情 况 就 发 生 了 变化 。 
译注 : 此 段 第 一 句 话 的 原文 是 : 


Before ES6, JavaScript strings revolved around 16-bit character encoding (UTF- 
16). 


然而 UTF-16 是 变 长 的 字符 编码 方式 ， 有 16 位 与 32 位 两 种 情况 。 JS 原先 使 用 的 则 是 
国定 16 位 ( 双 字 节 ) 的 字符 编码 方式 ， 即 UCS-2 。 


UTF-16 码 总 


Unicode 的 明确 目标 是 给 世界 上 每 一 个 字符 提供 全 局 唯一 标识 符 ， 而 16 位 的 字符 长 度 限制 已 

不 能 满足 这 种 需求 。 这 些 全 球 唯 一 标识 符 被 称 为 码 点 ( code points ) ， 就 是 从 0 开始 的 数 
字 。 码 点 类 似 于 字符 代码 ， 用 一 个 数字 来 代表 一 个 字符 。 字 符 编码 要 求 将 码 点 转换 为 内 部 一 
致 的 码 元 ， 而 对 于 UTF-16 来 说 ， 码 点 可 以 由 多 个 码 元 组 成 。 


在 UTF-16 中 的 第 一 个 216 码 点 表示 单个 16 位 码 元 ， 这 个 范围 被 称 为 多 语言 基本 平面 ( 
Basic Multilingual Plane > BMP ) 。 任 何 超出 该 范围 的 码 点 都 不 能 用 单个 16 位 码 元 表 
示 ， 而 是 会 落 在 扩展 平面 ( supplementary planes ) 内 。 UTF-16 LAE ( 
surrogate pairs ) 来 解决 这 个 问题 ， 允 许 使 用 两 个 16 位 码 元 来 表示 单个 码 点 。 这 意味 着 字 
符 串 内 的 任意 单个 字符 都 可 以 用 一 个 码 元 ( 共 16 位 ) 或 两 个 码 元 ( 共 32 位 ) 来 表示 ， 前 者 
对 应 基本 平面 字符 ， 而 后 者 对 应 扩展 平面 字符 。 


在 ES5 中 ， 所 有 字符 串 操作 都 基于 16 位 码 元 ， 这 表示 在 处 理 包 含 代理 对 的 UTF-16 字符 时 
会 出 现 预期 外 的 结果 ， 就 像 这 个 例子 


var text = "" ; 

console.log(text.length); Hit 2 
console.log(/‘.$/.test(text)); // false 
console. log(text.charAt(0)); iif 00. 
console.log(text.charAt(1)); LSR 
console.log(text.charcodeAt(0)); 155362 
console.log(text.charCodeAt(1)); JU SUPT AL 


这 个 Unicode 字符 mm 使 用 了 代理 对 ， 因 此 ， 上 面 的 JS 字符 串 操作 会 将 该 字符 串 当 作 两 个 
16 位 字符 来 对 待 ， 这 意味 着 : 


e tet 的 长 度 属 性 值 是 2 ， 而 不 是 应 有 的 1 © 

e 意图 匹配 单个 字符 的 正则 表达 式 匹 配 失 败 了 ， 因 为 它 认为 这 里 有 两 个 字符 。 

© charAt() 方法 无 法 返回 一 个 有 效 的 字符 ， 因 为 这 里 每 16 位 码 点 都 不 是 一 个 可 打印 字 
符 。 


charCodeAt ( ) 方法 同样 无 法 正确 识别 该 字符 ， 它 只 能 返回 每 个 码 元 的 16 位 数字 ， 但 在 ESS 
中 ， 这 已 经 是 对 text 变量 所 能 获取 到 的 最 精确 的 值 了 。 

ESG 则 是 强制 执行 UTF-16 字符 编码 以 解决 此 类 问题 ， 从 而 让 字符 串 操 作 标 准 化 ， 也 就 意味 
着 JS 能 够 支持 专门 针对 代理 对 的 功能 设计 。 本 章 接 下 来 会 讨论 与 此 有 关 的 几 个 典型 案例 。 


codePointAt() 方法 


ES6 为 全 面 支 持 UTF-16 而 新 增 的 方法 之 一 是 codepointat() ， 它 可 以 在 给 定 字 符 串 中 按 位 
置 提取 Unicode 码 点 。 该 方法 接受 的 是 码 元 位 置 而 非 字符 位 置 ， 并 返回 一 个 整数 值 ， 就 像 下 
面 的 console.log) 范例 所 展示 的 : 


var text = "a" ; 
console.log(text.charCodeAt(9)); // 55362 
console.log(text.charCodeAt(1)); Hef TPA 
console.log(text.charCodeAt(2)); // 97 
console.log(text.codePointAt(®)); // 134071 
console.log(text.codePointAt(1)); Ee PATA 
console.log(text.codePointAt(2));  // 97 


rep kk 


codePointat() 方法 的 返回 值 一 般 与 charcodeat() AA > RERE st HH He BMP 字符 。 
text 字符 串 的 第 一 个 字符 不 是 BMP 字符 ， 因 此 它 占用 了 两 个 码 元 ， 意 味 着 该 字符 串 的 
length 属性 是 3 而 不 是 2 © charcodeAt() 方法 只 返回 了 位 置 0 的 第 一 个 码 元 ; 而 
codePointAt() 返回 的 是 完整 的 码 点 ， 即 使 该 码 点 占用 了 多 个 码 元 。 对 于 位 置 1 (第 一 个 字 
符 的 第 二 个 码 元 ) 和 位 置 2 ( a" 字符 ) 来 说 ， 两 个 方法 返回 的 值 则 是 相同 的 。 

方法 就 是 最 简单 的 方法 。 


判断 字符 包含 了 一 个 还 是 两 个 码 元 ， 对 该 字符 调用 codePointAt() 
么 写 


可 以 照 下 面 的 函数 这 


function is32Bit(c) { 
return c.codePointAt(0) > OxFFFF; 


} 
console.log(is32Bit("" )); // true 
console.log(is32Bit("a")); // talse 


16 位 字符 的 上 边界 用 十 六 进 制 表示 就 是 FFFF 
( 共 32 位 ) 来 表示 。 


， 因 此 任何 大 于 该 数字 的 码 点 必定 用 两 个 码 元 


String.fromCodePoint() 方法 


当 ECMAScript 提供 了 某 种 方法 时 ， 它 一 般 也 会 给 出 方法 来 处 理 相反 的 操作 。 你 可 以 使 用 
codepointAt() 来 提取 字符 串 内 某 个 字符 的 码 点 ， 也 可 以 借助 String.fromcodePoint() 用 给 
定 的 码 点 来 产生 包含 单个 字符 的 字符 串 。 例 如 : 


console.log(String.fromCodePoint(134071)); // "" 


可 以 将 string.fromcodePoint() 视 为 string.fromcharCode() 的 完善 版 本 。 二 者 处 理 BMP F 
符 时 会 返回 相同 结果 ， 只 有 处 理 BMP 范围 之 外 的 字符 时 才 会 有 差异 。 


normalize() 方法 


Unicode 另 一 个 有 趣 之 处 是 ， 在 排序 或 其 它 一 些 比较 操作 中 ， 不 同 的 字符 可 能 会 被 认为 是 等 
同 的 。 有 两 种 方式 可 以 定义 这 种 关联 性 : 第 一 种 是 规范 相等 性 ( canonical equivalence 

) ， 意 味 着 两 个 码 点 序列 在 所 有 方面 都 被 认为 是 可 互 换 的 。 例 如 ， 两 个 字符 的 组 合 可 以 按 规 
范 等 同 于 另 一 个 字符 。 第 二 种 关联 性 是 兼容 性 〈 compatibility ) ， 两 个 兼容 的 码 点 序列 看 起 
来 有 差别 ， 但 在 特定 条 件 下 可 互 换 使 用 。 


由 于 这 些 关 联 性 ， 两 个 包含 不 同 码 点 序列 的 字符 串 ， 可 能 代表 着 相同 的 文本 内 容 。 例 如 ， 字 
符 a 与 双 字 符 的 字符 串 "ae" 有 时 能 互 换 使 用 ， 但 它们 并 不 严格 相等 ， 除 非 使 用 某 种 手 
段 来 标准 化 。 


ES6 给 字符 串 提 供 了 normalize() 方法 ， 以 支持 Unicode 标准 形式 。 该 方法 接受 单个 可 选 的 
字符 串 参 数 ， 用 于 指示 需要 使 用 下 列 哪 种 Unicode 标准 形式 : 


e Normalization Form Canonical Composition ( "nrc" )， 这 是 默认 值 ; 
e Normalization Form Canonical Decomposition ( "NFD" ) ; 

e Normalization Form Compatibility Composition ( "NFKc" ) ; 

e Normalization Form Compatibility Decomposition ( "NFKpD" ) ° 


解释 这 四 种 形式 的 差异 超出 了 本 书 的 范围 。 仅 需 记 住 ， 当 进行 字符 串 比 较 时 ， 必 须 将 它们 标 
准 化 为 同一 种 形式 。 例 如 : 


var normalized = values.map(function(text) { 
return text.normalize(); 


F); 


normalized.sort(function(first, second) { 
if (first < second) { 
return -1; 
} else if (first === second) { 
return 0; 
} else { 
return T; 
} 
}); 


此 代码 将 values 数组 中 的 字符 串 转 换 为 一 种 标准 形式 ， 以 便 让 转换 后 的 数组 可 以 被 正确 排 
序 。 你 也 可 以 在 比较 过 程 中 调用 normalize() ? 以 便 直 接 对 原始 数组 进行 排序 。 如 下 所 示 : 


values.sort(function(first, second) { 
var firstNormalized = first.normalize(), 
secondNormalized = second.normalize(); 


if (firstNormalized < secondNormalized) { 
return =i; 

} else if (firstNormalized === secondNormalized) { 
return 0; 

} else { 
return 1; 

} 

}); 


此 代码 的 重点 在 于 : first 5 second 再 一 次 被 使 用 同一 方式 标准 化 了 。 这 两 个 例子 利用 的 
是 默认 值 ， 即 NFC ， 不 过 你 也 能 随便 指定 其 他 任意 一 种 ， 就 像 这 样 : 


values.sort(function(first, second) { 
var firstNormalized = first.normalize("NFD"), 
secondNormalized = second.normalize("NFD"); 


if (firstNormalized < secondNormalized) { 
returm =; 

} else if (firstNormalized === secondNormalized) { 
returno; 

} else { 
return 1; 

} 

}); 


如 果 你 之 前 从 未 担心 过 Unicode 标准 化 方面 的 问题 ， 那 么 可 能 暂时 还 不 太 会 用 到 这 个 方法 。 
然而 若 你 曾经 开发 过 国际 化 的 应 用 ， 就 一 定 会 发 现 normalize() 方法 的 价值 。 

新 方法 并 不 是 ES6 为 Unicode 字符 串 提 供 的 唯一 改进 ， 新 增 的 还 有 两 个 有 用 的 语法 要 素 。 
EMRAN U 标志 

你 可 以 使 用 正则 表达 式 来 完成 字符 串 的 很 多 通用 操作 。 但 要 记 住 ， 正 则 表达 式 假定 单个 字符 
使 用 一 个 16 位 的 码 元 来 表示 。 为 了 解决 这 个 问题 ， ES6 为 正则 表达 式 定义 了 用 于 处 理 


Unicode 的 u 标志 。 


u 标志 实例 


当 一 个 正则 表达 式 设置 了 u 标志 时 ， 它 的 工作 模式 将 切换 到 针对 字符 而 非 码 元 。 这 意味 着 正 
则 表达 式 将 不 会 被 字符 囊 中 的 代理 对 所 混淆 ， 而 是 会 按 预期 工作 。 例 如 ， 研 究 以 下 代码 : 


var text = ua 

console.log(text.length); M 2 
console.log(/^.$/.test(text)); // false 
console.log(/^.$/u.test(text)); // true 


正则 表达 式 / 八 .$/ 会 匹配 只 包含 单个 字符 的 任意 字符 串 。 当 不 使 用 u 标志 时 ， 该 正则 表达 
式 只 匹配 码 元 ， 所 以 不 能 匹配 由 两 个 码 元 表示 的 这 个 日 文字 符 。 启 用 u 标志 后 ， 正 则 表达 式 
就 会 比较 字符 而 不 是 码 元 ， 因 此 能 匹配 这 个 日 文字 符 。 


计算 码 点 数量 


可 惜 的 是 ，ES6 并 没有 添加 用 于 判断 字符 囊 包含 多 少 个 码 点 的 方法 ， 但 借助 u 标志 ， 可 以 
使 用 正则 表达 式 来 进行 计算 ， 如 下 所 示 : 


function codePointLength(text) { 
var result = text.match(/[\s\S]/gu); 
return result ? result.length : 0; 


} 


console.log(codePointLength("abc")); Hf B 
console.log(codePointLength("bc" )); Wie 2 


此 例 调 用 了 match() 方法 来 检查 text 中 的 空白 字符 与 非 空 白字 符 (使 用 [\s\S] 以 确保 
该 模式 能 匹配 换行 符 ) ， 所 用 的 正则 表达 式 启用 了 全 局 与 Unicode 特性 。 在 匹配 至 少 成 功 一 
次 的 情况 下 ， result 变量 会 是 包含 匹配 结果 的 数组 ， 因 此 该 数组 的 长 度 就 是 字符 串 中 码 点 
的 数量 。 在 Unicode 中 ， 字 符 串 "abo" 与 "be" 同样 包含 三 个 字符 ， 所 以 数组 长 度 为 © 


这 种 方法 虽然 可 用 ， 但 它 不 够 快 ， 尤 其 在 操作 长 字符 串 时 。 你 也 可 以 使 用 字符 串 的 迭代 
器 ( 详 见 第 八 章 ) 来 达到 相同 目的 。 一 般 来 说 ， 只 要 有 可 能 就 应 尽量 减少 对 码 点 数量 的 
计算 。 


判断 是 否 支持 U 标志 


既然 u 标志 是 一 项 语法 变更 ， 在 不 兼容 ES6 的 JS 引擎 中 试图 使 用 它 就 会 抛 出 语法 错误 。 
最 安全 的 方式 是 使 用 如 下 部 数 来 判断 u 标志 是 否 被 支持 : 


function hasRegExpu() { 
try { 
var pattern = new RegExp(".", "u"); 
return true; 
} catch (ex) { 
return false; 


} 


此 函数 将 u 作为 一 个 参数 来 调用 RegExp 构造 器 ， 该 语法 即便 在 旧版 JS 引擎 中 都 是 有 效 
的 ， 而 在 u 未 被 支持 的 情况 下 构造 器 会 抛 出 错误 。 


若 你 的 代码 仍 需要 在 旧版 JS 引擎 中 工作 ， 那 么 在 使 用 u 标志 时 应 当 始 终 使 用 RegExp 
构造 器 。 这 会 避免 语法 错误 ， 并 允许 你 有 选择 地 检测 并 使 用 u 标志 ， 而 不 会 导致 执行 
被 中 断 


字符 串 的 其 他 改动 


JS 字符 串 的 特性 总 是 落后 于 其 它 语言 ， 例 如 ， 直 到 ES5 中 字符 串 才 获得 了 trimo 方法 。 
而 ES6 则 继续 添加 新 功能 以 扩展 JS 解析 字符 串 的 能 力 。 


识别 子 字符 串 的 方法 


自从 JS 语言 被 使 用 ， 开 发 者 们 就 使 用 indexof() 方法 在 字符 串 内 识别 子 字符 串 。ES6 包 
了 以 下 三 个 方法 来 满足 这 类 需求 : 


e includes() 方法 ， 若 给 定 文本 存在 于 字符 串 中 ， 会 返回 true ， 否 则 返回 false ; 
e startswith() 方法 ， | ， 返回 true ° GUAT false ; 
e endswith() 方法 ， 若 给 定 文本 出 现在 字符 串 结尾 处 ， 返 回 true > GAE false 。 


每 个 方法 都 接受 两 个 参数 : 需要 搜索 的 文本 ， 以 及 可 选 的 搜索 起 始 位 置 索引 。 当 提供 了 第 二 
个 参数 时 ， includes() 与 startswith() 方法 会 从 该 索引 位 置 开 始 尝试 匹配 ; 而 
endswith() 方法 则 会 将 该 位 置 减 去 需 搜 索 文本 的 长 度 ， 在 计算 出 的 位 置 尝试 匹配 。 若 未 提供 
第 二 个 参数 ， includes() 与 startswith() 方法 会 从 字符 串 起 始 处 开始 查找 ， 而 

endswith() 方法 的 查找 则 在 尾部 进行 。 第 二 个 参数 实际 上 缩小 了 搜索 的 范围 。 以 下 是 使 用 这 
些 方 法 的 演示 : 


var msg = "Hello world!"; 


console.log(msg.startsWith("Hello")); // true 
console.log(msg.endswith("!")); // true 
console.log(msg.includes("o")); // true 
console.log(msg.startsWith("o")); // false 
console.log(msg.endswWith("world!")); // true 
console.log(msg.includes("x")); // false 
console.log(msg.startswith("o", 4)); // true 
console.log(msg.endsWith("o", 8)); I EE 
console.log(msg.includes("o", 8)); // false 


前 六 次 调用 没有 使 用 第 二 个 参数 ， 因 此 它们 在 必要 情况 下 会 搜索 整个 字符 囊 。 最 后 三 次 调用 
只 检查 了 字符 串 的 一 部 分 : 调用 msg.startswWith("o", 4) 从 msg 字符 串 的 索引 位 置 4 ( BP 
"Hello" 中 的 "o" ) 开始 尝试 匹配 ; 调用 msg.endswith("o", 8) 会 在 位 置 7 进行 匹配 党 
试 ， 因 为 需要 将 参数 8 减 去 字符 串 "o 的 长 度 1 ; 而 调用 msg.includes("o", 8) 则 从 
索引 位 置 8 开始 党 试 匹配 ， 也 就 是 "world" PA "re" œ 


原作 在 此 处 有 错 作者 未 看 出 问题 的 原因 是 : "Hello world!" 这 个 字符 串 的 第 5 WS 
符 (索引 4 ) 与 第 8 个 字符 (R37) 刚好 都 是 字母 "o" > endswith() 的 匹配 误 打 
误 接 地 成 功 了 。 


如 果 修 改 查找 目标 ， 使 用 msg.endswith("w", 7) 就 能 看 出 明显 区 别 2 按 原 作 的 说 法 ， 
12 -7=5 9° R315 (第 6 个 字符 ) 是 空格 "mm" ， 匹 配 应 当 失 败 。 但 实际 上 匹配 会 成 
功 ， 因 为 真实 的 计算 是 7 -1=6 ， 索 引 6 (第 7 个 字符 ) 正 是 字母 wr 。 


按照 ECMAScript 的 规范 ， 当 调用 endsWith() 并 提供 第 二 个 参数 时 ， 会 用 该 参数 减 去 欲 
搜索 文本 的 长 度 ， 在 计算 出 的 位 置 对 原 字 符 串 与 欲 搜 索 的 文本 进行 逐个 字符 比较 HR 
提供 第 二 个 参数 ， 则 会 使 用 原 字 符 串 的 长 度 去 减 欲 搜索 文本 的 长 度 。 查 找 过 程 实际 上 是 
正 向 而 非 逆 向 的 。 


还 是 以 "Hello world!" 为 例 ， 若 使 用 msg.endswith("11o") ? 则 实际 查找 过 程 是 : 


12 - 3 = 9 ， 然 后 在 原 字 符 串 索引 9 的 位 置 开 始 匹 配 。 

2. 先 将 原 字符 串 第 10 个 字符 "In 与 lo" 的 第 一 个 字符 1 比较， 相同， 需要 
继续 匹配 。 

3. 再 将 原 字符 串 第 11 个 字符 "qn 与 "ilo" 的 第 二 个 字符 1 比较， 不同， 匹配 
失败 。 


若 改 用 msg.endswith("1lo", 5) > M: 


1. 5-3=2 ， 然 后 在 原 字符 串 索引 2 的 位 置 开 始 匹 配 。 

2, 先 将 原 字 符 串 第 3 个 字符 "r 5 110" 的 第 一 个 字符 "1" 比较， 相同， 需要 继 
续 匹 配 。 

3. 再 将 原 字符 串 第 4 个 字符 "Iw 5 "lo" 的 第 二 个 字符 "1" 比较 ， 依 然 相同 ， 需 
要 继续 匹配 。 

4, 再 将 原 字 符 串 第 5 个 字符 "ow 与 "uo 的 第 三 个 字符 "o" 比较 ， 依 然 相同 。 

5. 全 部 字符 比较 完成 ， 匹 配 成 功 。 


虽然 这 三 个 方法 使 得 判断 子 字 符 串 是 否 存 在 变 得 更 容易 ， 但 它们 的 返回 结果 只 是 布尔 值 。 若 
你 需要 找到 确切 的 匹配 位 置 ， 则 需要 使 用 indexof() 和 lastIndexof() ° 
如 果 向 startswith() 、 endswith() 2 includes() 方法 传 入 了 正则 表达 式 而 不 是 字符 
串 ， 会 抛 出 错误 。 这 与 indexof() 以 及 lastIndexof() 方法 的 表现 形成 了 反差 ， 它 们 会 
将 正则 表达 式 转换 为 字符 串 并 搜索 它 。 


repeat() 方法 


ES6 还 为 字符 串 添加 了 一 个 repeat() 方法 ， 它 接受 一 个 参数 作为 字符 串 的 重复 次 数 ， 返 回 
一 个 将 初始 字符 串 重 复 指定 次 数 的 新 字符 串 。 例 如 : 


30 


console.log("x".repeat(3)); Hp “eee 
console.log("hello".repeat(2)); Zo enellohedalios 
console.log("abc".repeat(4)); // “abcabcabcabc" 


此 方法 比 相同 目的 的 其 余 方法 更 加 方便 ， 在 操纵 文本 时 特别 有 用 ， 尤 其 是 在 需要 创建 缩 进 的 
代码 格式 化 工具 中 ， 像 这 样 : 


// indent 使 用 了 一 定数 量 的 空格 
var indent = " ".repeat(4), 
indentLevel = 0; 


// 每 当 需 要 增加 缩 进 
var newIndent = indent.repeat(++indentLevel) ; 


第 一 次 调用 repeat() 创建 了 一 个 包含 四 个 空格 的 字符 串 ， 而 indentLevel 变量 会 持续 追踪 
缩 进 的 级 别 。 此 后 ， 仅 通过 增加 indentLevel 的 值 来 调用 repeat() 方法 ， 便 可 以 改变 空格 数 


Bem 
o 


ta 


ES6 也 为 正则 表达 式 的 功能 进行 了 一 些 改进 ， 这 些 内 容 不 适合 纳入 特定 章节 ， 因 此 集中 在 下 
一 节 介 绍 o 


I a 


正则 表达 式 的 其 他 改动 


正则 表达 式 是 在 JS 中 操作 字符 串 的 重要 部 分 之 一 ， 与 其 他 方面 相似 ， 它 在 以 往 的 版 本 中 并 未 
有 太 多 变化 。 不 过 ， 为 了 配合 字符 串 的 变更 ， ES6 也 对 正则 表达 式 进行 了 一 些 改 进 


EM RAN y 标志 


在 Firefox 实现 了 对 正则 表达 式 y 标志 的 专 有 扩展 之 后 ，ES6 随 之 将 其 标准 化 。 y 标志 影 
响 正 则 表达 式 搜索 时 的 粘连 ( sticky ) 属性 ， 它 表示 在 字符 串 中 检索 匹配 的 字符 时 ， 应 当 
从 正则 表达 式 的 lastindex 属性 值 的 位 置 开 始 。 如 果 在 该 位 置 没 有 匹配 成 功 ， 那 么 正则 表达 
式 将 停止 检索 。 参 考 如 下 代码 以 了 解 其 工作 机 制 : 


var text = "hello1 hello2 hello3", 
pattern = /hello\d\s?/, 
result = pattern.exec(text), 
globalPattern = /hello\d\s?/g, 
globalResult = globalPattern.exec(text), 
stickyPattern = /hello\d\s?/y, 
stickyResult = stickyPattern.exec(text); 


console.log(result[0]); // “helloi " 
console.log(globalResult[0]); // "hello1 " 
console.log(stickyResult[0]); A hedlowm 


pattern.lastIndex = 1; 
globalPattern.lastIndex = 1; 
stickyPattern.lastIndex = 1; 


result = pattern.exec(text); 
globalResult = globalPattern.exec(text); 
stickyResult = stickyPattern.exec(text); 


console.log(result[0]); shertltom 
console.log(globalResult[0]); ohedtlio2e 
console.log(stickyResult[0]); // 错误 ! stickyResult 424 null 


此 例 中 有 三 个 正则 表达 式 : pattern 中 的 表达 式 没 有 使 用 任何 标志 ， globalPattern 使 用 了 
g 标志 ， stickypattern 则 使 用 了 y 标志 。 对 console.log() 的 第 一 次 调用 ， 三 个 正则 

表达 式 都 分 别 返回 了 "hello1 " ， 注 意 此 字符 串 尾 部 有 个 空格 。 

此 后 ， 三 个 模式 的 lastindex 属性 全 部 被 更 改 为 1， 表示 三 个 模式 的 正则 表达 式 都 应 当 从 第 
二 个 字符 开始 尝试 匹配 。 不 使 用 任何 标志 的 正则 表达 式 完全 忽略 了 对 于 lastIndex 的 更 改 ， 

依然 匹配 了 "hello1" ;而 使 用 g 标志 的 正则 表达 式 继续 匹配 了 "helloz " ， 因 为 它 从 第 
二 个 字符 ( rer ) 开始 ， 向 着 字符 串 尾 部 方向 持续 搜索 ; 粘连 的 正则 表达 式 则 在 第 二 个 字符 
处 没有 匹配 成 功 ， 因 此 stickyResult 的 值 是 null ° 


一 旦 匹配 操作 成 功 ， 粘 连 标 志 就 会 将 匹配 结果 之 后 的 那个 字符 的 索引 值 保存 在 lastindex 
中 ; 若 匹配 未 成 功 ， 那 么 lastIndex 的 值 将 重 置 为 0。 全 局 标志 的 行为 与 其 相同 ， 如 下 所 
示 : 


var text = "hello1 hello2 hello3", 
pattern = /hello\d\s?/, 
result = pattern.exec(text), 
globalPattern = /hello\d\s?/g, 
globalResult = globalPattern.exec(text), 
stickyPattern = /hello\d\s?/y, 
stickyResult = stickyPattern.exec(text); 


console.log(result[0]); // “helloa " 
console.log(globalResult[0]); // "hello1 
console.log(stickyResult[0]); netilod 


console.log(pattern.lastIndex); // 0 
console.log(globalPattern.lastIndex) ; ie Te 
console.log(stickyPattern.lastIndex); Wik Te 


result = pattern.exec(text); 
globalResult = globalPattern.exec(text); 
stickyResult = stickyPattern.exec(text); 


console.log(result[0]); // “hellot 
console.log(globalResult[0]); // “hello2 
console.log(stickyResult[0]); // "hello2 


console.log(pattern.lastIndex); // 0 
console.log(globalPattern.lastIndex) ; // Aa 
console.log(stickyPattern.lastIndex); Haj TA 


对 于 stickyPattern 和 globalPattern 模式 变量 来 说 ， 第 一 次 调用 之 后 lastIndex 的 值 均 
被 更 改 为 了 ， 而 第 二 次 则 均 被 改 为 14 。 


关于 粘连 标志 ， 有 两 个 微妙 细节 需要 牢记 : 


1. 只 有 调用 正则 表达 式 对 象 上 的 方法 (例如 exec() 4 test() 方法 ) > lastIndex 属性 
才 会 生效 。 而 将 正则 表达 式 作为 参数 传递 给 字符 囊 上 的 方法 (例如 match() ) ， 并 不 会 
体现 粘连 特性 。 

2. SRA ^ 字符 来 匹配 字符 串 的 起 始 处 ， 粘 连 的 正则 表达 式 只 会 匹配 字符 串 的 起 始 位 置 ， 
或 在 多 行 模式 ( m ) 下 匹配 行 首 。 当 1lastIndex 为 0 时 ， 无 论 是 否 使 用 粘连 的 正则 表 
达 式 ， 对 于 ^ 的 处 理 都 是 一 致 的 ; 而 当 lastIndex 在 单行 模式 下 不 对 应 于 整个 字符 串 
起 始 处 ， 或 者 当 它 在 多 行 模式 下 不 对 应 于 行 首 时 ， 粘 连 的 正则 表达 式 永远 不 会 匹配 成 
I) o 


和 正则 表达 式 其 他 标志 相同 ， 你 可 以 根据 一 个 属性 来 检测 y 标志 是 否 存 在 。 此 刻 需 检查 
sticky 属性 ， 如 下 : 


var pattern = /hello\d/y; 


console.log(pattern.sticky); Hf VUE 


如 果 粘 连 标志 存在 ， 那 么 sticky 属性 的 值 会 被 设 为 true ， 否 则 会 被 设 为 false 。 sticky 
属性 由 y 标志 存在 与 否决 定 ， 是 只 读 的 ， 它 的 值 不 能 在 代码 中 修改 。 
与 u 标志 相似 ， y 标志 也 是 个 语法 变更 ， 所 以 在 旧版 JS 引擎 中 它 会 造成 语法 错误 。 你 可 
以 用 如 下 方法 来 检测 它 是 否 被 支持 : 
function hasRegExpY() { 
try { 
var pattern = new RegExp(".", "y"); 
return true; 
} catch (ex) { 
return false; 


} 


此 函数 类 似 于 对 u 标志 的 检查 ， 在 无 法 使 用 y 标志 来 创建 正则 表达 式 时 会 返回 false 。 同 


样 ， 如 果 使 用 y 标志 的 代码 可 能 在 昌 版 JS 引擎 中 使 用 ， 请 确保 用 RegExp 构造 器 来 定义 正 
W] | 表达 式 > VA ME 避免 语 法 错误 o 


复制 正则 表达 式 
在 ES5 中 ， 你 可 以 将 正则 表达 式 传递 给 RegExp 构造 器 来 复制 它 ， 就 像 这 样 : 


var ret = /ab/i, 


re2 = new RegExp(re1); 


re2 变量 只 是 rel 的 一 个 副本 。 但 如 果 你 向 RegExp 构造 器 传递 了 第 二 个 参数 ， 即 正则 表 
达 式 的 标志 ， 那 么 该 代码 就 无 法 工作 ， 正 如 该 范例 : 


var ret = /ab/i, 


// ES5 中 会 抛 出 错误 ， ES6 中 可 用 


i 


re2 = new RegExp(rei, "g"); 


如 果 你 在 ES5 环境 中 运行 这 段 代 码 ， 那 么 你 会 收 到 一 条 错误 信息 ， 表 示 在 第 一 个 参数 已 经 是 
正则 表达 式 的 情况 下 ， 不 能 再 使 用 第 二 个 参数 。ES6 则 修改 了 这 个 行为 ， 人 允许 使 用 第 二 个 参 
数 ， 并 且 让 它 禾 盖 第 一 个 参数 中 的 标志 。 例 如 : 


var rel = /ab/i, 


// ESS 中 会 抛 出 错误 ， ES6 中 可 用 
re2 = new RegExp(rei, "g"); 


console.log(re1.toString()); If ive ovat 
console.log(re2.toString()); DO 四 
console.log(re1.test("ab")); // true 
console.log(re2.test("ab")); // true 
console.log(re1.test("AB")); // true 
console.log(re2.test("AB")); // false 


此 代码 中 的 rea 带 有 忽略 大 小 写 的 i 标志 ， 而 re2 则 只 带 有 全 局 的 g 标志 。 RegExp 
构造 器 复制 了 rer 的 模式 并 用 g 标志 替换 了 i 标志 。 如 果 没 有 第 二 个 参数 ， re2 就 会 
拥有 与 rer 相同 的 标志 。 


flags 属 性 


除了 新 增 一 个 标志 ， 并 且 扩 充 了 使 用 标志 的 方式 ，ES6 还 新 增 了 一 个 与 标志 关联 的 属性 。 在 
ES5 中 ， 你 可 以 使 用 source 属性 来 获取 正则 表达 式 的 文本 ， 但 若 想 获取 标志 字符 串 ， 你 必 
须 解 析 tostring() 方法 的 输出 ， 就 像 下 面 展示 的 那样 : 


function getFlags(re) { 
var text = re.toString(); 
return text.substring(text.lastIndexof("/") + 1, text.length); 


// toString() 的 输出 为 "/ab/g" 
var re = /ab/g; 


console.log(getFlags(re)); Hii Co} 


此 处 将 正则 表达 式 转换 为 一 个 字符 事 ， 并 返回 了 最 后 一 个 /之 后 的 字符 ， 这 些 字符 即 为 该 正 
则 表达 式 所 用 的 标志 。 

ES6 新 增 了 flags 属性 用 于 配合 source 属性 ， 让 标志 的 获取 变 得 更 容易 。 这 两 个 属性 均 
为 只 有 getter 的 原型 访问 器 属性 » 因此 都 是 只 读 的 ° flags Henan ee ae ; 
有 助 于 调试 与 继承 方面 的 工作 。 


ES6 后 期 加 入 的 flags 属性 ， 会 返回 由 正则 表达 式 中 所 有 标志 组 成 的 字符 事 。 例 如 


var re = /ab/g; 


console.log(re.source); Le a 
console.log(re.flags); Li he 


本 例 查找 了 re 的 所 有 标志 并 将 其 打印 到 控制 台 ， 所 用 的 代码 量 大 大 少 于 tostring() 方 
式 。 同 时 使 用 source 和 flags 允许 你 直接 提取 正则 表达 式 的 组 成 部 分 ， 而 不 必 将 正则 表达 
式 转换 为 字符 事 。 


关于 字符 串 与 正则 表达 式 ， 本 章 介绍 过 的 改进 已 绝对 强大 ， 然 而 ES6 在 字符 串 方面 还 有 更 大 
的 扩展 ， 它 引入 了 一 种 新 的 字面 量 形式 让 字符 囊 的 使 用 更 加 灵活 。 


模板 字面 量 


JS 的 字符 串 相 对 其 他 语言 来 说 功能 总 是 有 限 的 。 例 如 ， 本 章 介绍 过 的 字符 串 方法 在 ES6 之 前 
都 缺失 ， 而 字符 串 的 拼接 功能 则 极 尽 简 陋 。 为 了 让 开发 者 能 够 解决 复杂 的 问题 ，ES6 的 模板 
== (template literal ) 提供 了 创建 领域 专用 语言 的 语法 ， 与 ES5 及 更 早 版 本 的 解决 方 
和 案 相 比 ， 处 理 内 容 可 以 更 安全 。 领 域 专用 语言 ( domain-specific language > DSL ) 是 被 设 
计 用 于 特定 有 限 目 的 的 编程 语言 ， 与 JavaScript 这 样 通用 目的 语言 相反 。 ECMAScript wiki 
在 template literal strawman 上 提供 了 如 下 描述 : 


操纵 来 自 于 其 它 语言 的 内 容 ， 并 且 能 够 对 XSS 、SQL 注入 等 注入 攻击 免疫 ， 或 具有 抗 
性 o 


不 过 实际 上 ，JS 语言 直到 ES5 依然 完全 缺失 如 下 功能 ， 模 板 字 面 量 是 ES6 针对 这 些 功能 的 
回应 : 


多 行 字符 串 : 针对 多 行 字符 串 的 正式 概念 ; 
e@ 基本 的 字符 串 格 式 化 : 使 用 已 存在 的 变量 值 ， 对 字符 串 进行 部 分 替换 的 能 力 ; 
e HTML 转 义 : 能 转换 字符 串 以 便 将 其 安全 插入 到 HTML 中 的 能 力 。 


模板 字面 量 以 一 种 全 新 方式 解决 了 这 些 问题 ， 而 并 未 给 JS 已 有 的 字符 串 添 加 额外 功能 。 


基本 语法 


模板 字面 量 的 最 简单 语法 ， 是 使 用 反 引 号 ( 、 ) RAREMPH E> ATEMI SRŽ 
引号 。 参 考 以 下 例子 : 


let message = “Hello world!`; 


console.log(message) ; // “Hello world!" 
console.log(typeof message); WAS Enno 
console.log(message. length); Hef ANP 


此 代码 说 明了 message 变量 包含 的 是 一 个 普通 的 JS 字符 串 。 模 板 字面 量 语法 被 用 于 创建 一 
个 字符 串 值 ， 并 被 赋值 给 了 message XE e 


若 你 想 在 字符 串 中 包含 反 引 号 ， 只 需 使 用 反 斜 杠 〈《 \、) 转 义 即 可 ， 就 像 下 面 这 个 版 本 的 


RE. 
message Qe: 


let message = `\`Hello\` world!`; 


console.log(message) ; 7A * Helios world!" 
console.log(typeof message); Mie Sug 
console.log(message.length) ; Lf TA 


在 模板 字面 量 中 无 需 对 双 引 号 或 单 引号 进行 转 义 。 
乡 行 字符 串 


o 


JS 开发 者 从 语言 诞生 起 就 一 直 寻 找 一 种 能 创建 多 行 字符 串 的 方法 。 但 在 使 用 双 引 号 或 单 引 号 
时 ， 整 个 字符 串 只 能 放 在 同一 和 


ES6 之 前 的 权宜 之 计 


感谢 存在 已 久 的 一 个 语法 bug > JS 字符 串 的 权宜 之 计 ， 在 换行 之 前 使 
AKETA ( \、) 即 可 。 此 处 有 个 范例 


var message = "Multiline \ 
Stringa; 
console.log(message); // “Multiline string" 


message 字符 串 打 印 输 出 时 不 会 有 换行 ， 因 为 反 斜 线 被 视 为 行 的 续 迁 符号， 而 非 新 行 的 符 
号 。 为 了 在 输出 中 显示 换行 ， 你 需要 手动 加 入 它 


var message = "Multiline \n\ 
Striga, 
console.log(message); // “Multiline 


// string" 


在 所 有 主流 的 JS 引擎 中 ， 此 代码 都 会 输出 两 行 ， 但 是 该 行为 被 认定 为 一 个 bug ， 并 被 许多 
开发 者 建议 规避 。 


ES6 之 前 创建 多 行 字符 串 的 其 他 尝试 ， 一 般 都 基于 数组 或 字符 串 的 拼接 ， 就 像 这 样 : 


var message = [ 
SMU ean eres 
SmgEe 

].join("\n"); 


let message = "Multiline \n" + 
KS ERINO? 
关于 JS 缺失 的 多 行 字符 串 功 能 ， 开 发 者 的 所 有 解决 方法 都 不 够 完美 。 


多 行 字符 串 的 简单 解决 方法 


ES6 d 字符 串 更 易 创建 ， HARE ERE 。 只 需 在 想 要 的 位 置 包 
含 换行 即 可 ， 它 会 包含 在 结果 字符 串 中 。 例 如 


let message = “Multiline 

string’; 

console.log(message) ; // Multiline 
AA SEE A 

console.log(message.length); // 16 


反 引 号 之 内 的 所 有 空白 符 都 是 字符 串 的 一 部 分 ， 因 此 需要 留意 缩 进 。 例 如 : 


let message = “Multiline 
Stringi, 
console.log(message); // ‘Mul EET 
// string" 
console.log(message.length) ; Limo 


此 代码 中 ， ans 面 量 第 二 行 前 面 的 所 有 空白 符 都 被 视 为 字符 串 自 身 的 一 部 分 。 如 果 让 多 行 


文本 保持 合适 的 se ek tac E end ines 
行 缩 进 sa 
let html = ` 
<div> 
<h1>Title</h1> 


</div>>.trim(); 


此 代码 从 第 一 行 开始 创建 模板 字面 量 ， 但 有 效 文本 从 第 二 行 才 开始 。HTML 标签 的 缩 进 增强 
了 可 读 性 ， 之 后 再 调用 trim() 方法 移 除 了 起 始 的 空 行 。 


如 果 你 喜欢 的 话 ， 也 可 以 在 模板 字面 量 中 使 用 \n 来 指示 换行 的 插入 位 置 : 


let message = ~“Multiline\nstring ; 
console.log(message) ; // “Multiline 
YES 

console.log(message. length); ff WS 


产生 替换 位 


模板 字面 量 目前 看 上 去 仅仅 是 普通 JS 字符 串 的 升级 版 ， 但 二 者 之 间 引 正 的 区 别 在 于 前 者 
的 “替换 位 ”。 替 换 位 允许 你 将 任何 有 效 的 JS 表达 式 奉 入 到 模板 字面 量 中 ， 并 将 其 结果 输出 为 
字符 串 的 一 部 分 。 


替换 位 由 起 始 的 ${ 与 结束 的 } 来 界定 ， 之 间 允 许 放 入 任意 的 JS RAK o mij PHM 
位 允许 你 将 本 地 变量 直接 上 谱 入 到 结果 字符 串 中 ， 例 如 : 


let name = "Nicholas", 
message = Hello, ${name}.~; 
console.log(message); A helen Nachollasin: 


替换 位 ${name} 会 访问 本 地 变量 name ， 并 将 其 值 插 入 到 message 字符 串 中 。 message 
变量 会 立即 持 有 该 变量 的 值 。 


模板 字面 量 能 访问 到 作用 域 中 任意 的 可 访问 变量 。 试 图 使 用 未 定义 的 变量 会 抛 出 错误 ， 
无 论 是 否 为 严格 模式 。 


既然 替换 位 是 JS 表达 式 ， 那 么 可 替换 的 就 不 仅仅 是 简单 的 变量 名 。 你 可 以 轻松 齿 入 计算 、 函 
数 调 用 等 等 。 例 如 : 


let count = 10, 
price = 0.25, 
message = ‘${count} items cost $${(count * price).toFixed(2)}.°; 


console.log(message) ; (lO TEGS CO Siem Sa 5 Ol: 
此 代码 在 模板 字面 量 的 一 部 分 执行 了 一 次 计算 ， cout 与 price 变量 相 乘 ， 再 使 用 


.toFixed() 方法 将 结果 格式 化 为 两 位 小 数 。 而 在 第 二 个 替换 位 之 前 的 美元 符号 被 照常 输出 ， 
因为 没有 左 花 括号 紧 随 其 后 。 


模板 字面 量 本 身 也 是 JS 表达 式 ， 意 味 着 你 可 以 将 模板 字面 量 诅 入 到 另 一 个 模板 字面 量 内 部 ， 
如 同 下 例 : 
let name = "Nicholas", 
message = ‘Hello, ${ 


‘my name is ${ name }` 


ye; 


console. log(message) ; // “Hello, my name is Nicholas." 


sl AMER FOEALRAT AA °c AA gf 之 后 使 用 了 另 一 个 模板 字面 量 ， 第 
二 个 $f 标示 了 岁入 到 内 层 模板 字面 量 的 表达 式 的 开始 ， 该 表达 式 为 name 变量 ， 其 值 被 插 
入 结果 。 


标签 化 模板 


现在 你 已 了 解 到 ， 模 板 字面 量 在 无 须 拼接 操作 的 情况 下 ， 是 如 何 创建 多 行 字 符 事 ， 以 及 如 何 
将 值 插 入 字符 串 的 。 不 过 模板 字面 量 丨 实 威力 其 实 来 源 于 标签 化 模板 。 模 板 标 签 ( template 
tag ) 能 对 模板 字面 量 进行 转换 并 返回 最 终 的 字符 囊 值 ， 标签 在 模板 的 起 始 处 被 指定 ， 即 在 第 
一 个 、 之 前 ， 如 下 所 示 : 


let message = tag Hello world’; 


在 本 例 中 ， tag 即 为 应 用 到 `Hello world 模板 字面 量 上 的 模板 标签 。 
定义 标签 


一 个 标签 (tag ) 仅 是 单纯 的 函数 ， 它 被 调用 时 接收 需要 处 理 的 模板 字面 量 数 据 。 标 签 所 接 
收 的 数据 被 划分 为 独立 片段 ， 并 且 应 当 将 它们 组 合 起 来 以 产生 结果 。 第 一 个 参数 是 个 数组 ， 
包含 被 JS 解释 过 的 字面 量 字 符 串 ， 随 后 的 参数 是 每 个 替换 位 的 解释 值 。 


标签 函数 的 参数 一 般 定义 为 剩余 参数 形式 ， 以 便 更 方便 处 理 数据 ， 如 下 : 
function tag(literals, ...substitutions) { 


// 返回 一 个 字符 囊 


} 


为 了 更 好 理解 传递 给 标签 的 参数 是 什么 ， 可 研究 下 例 : 


let count = 10, 
price = 0.25, 
message = passthru ${count} items cost $${(count * price).toFixed(2)}.°; 


若 存 在 一 个 名 为 passthru() hy BA > BRAG AERA SER HAH—* literals 
数组 ， 包 含 如 下 元 素 : 


。 在 首 个 替换 位 之 前 的 空 字符 串 ( ww ) 
@ 首 个 替换 位 与 第 二 个 替换 位 之 间 的 字符 串 ( " items cost $" ) 3 
© 第 二 个 替换 位 之 后 的 字符 串 (n ) o 


接 下 来 的 参数 会 是 10 ， 也 就 是 cout 变量 的 解释 值 ， 它 也 会 成 为 substitutions 数组 的 
第 一 个 元 素 2 最 后 一 个 参数 则 会 是 "2,50" ， 即 (count * price).toFixed(2) 的 解释 值 ， 并 
且 会 是 substitutions 数组 的 第 二 个 元 素 


需要 注意 literals 的 第 一 个 元 素 是 空 字符 串 ， 以 确保 literals[o] 总 是 字符 串 的 起 始 部 
分 ， 正 如 literals[literals.length - 1] 总 是 字符 串 的 结尾 部 分 o 同时， 替换 位 的 元 素数 量 
也 总 是 比 字面 量 元 素 少 1， 意 味 着 表达 式 substitutions.length === literals.length - 1 的 
值 总 是 true ° 


使 用 这 种 模式 ， 可 以 交替 使 用 literals 与 substitutions 数组 来 生成 一 个 结果 字符 串 : 以 
literals 中 的 首 个 元 素 开始 ， 后 面 紧 跟着 substitutions 中 的 首 个 元 素 ， 如 此 反复 ， 直 到 
结果 字符 串 被 生成 完毕 。 你 可 以 像 下 例 这 样 交替 使 用 两 个 数组 中 的 值 来 模拟 模板 字面 量 的 默 
认 行 为 : 


function passthru(literals, ...substitutions) { 
let result = ""; 
// 仅 使 用 substitution 的 元 素数 量 来 进行 循环 


for (let i = 0; i < substitutions.length; i++) { 
result += literals[i]; 
result += substitutions[i]; 


// 添加 最 后 一 个 字面 量 
result += literals[literals.length - 1]; 
return result; 
let count = 10, 
price = 0.25, 
message = passthru ${count} items cost $${(count * price).toFixed(2)}.°; 


console.log(message) ; 1, SLOP UECMSNCOSE S255 0 
本 例 定 义 了 passthru 标签 ， 所 执行 的 转换 操作 与 模板 字面 量 的 默认 行为 相同 。 唯 一 的 诀窍 


是 在 循环 中 使 用 substituions.length 而 不 是 literals.length 来 避免 substituions 数组 
的 越界 。 它 能 工作 是 由 于 ES6 对 literals 和 substituions 的 良好 定义 。 


substituions 中 包含 的 值 不 必 是 字符 串 。 若 表达 式 的 计算 结果 为 数字 (就 像 上 例 ) > AB 
么 该 数值 也 会 被 传 入 。 决 定 这 些 值 在 结果 中 如 何 输 出 是 标签 的 职责 。 


使 用 模板 字面 量 中 的 原始 值 


模板 标签 也 能 访问 字符 串 的 原始 信息 ， 主 要 指 的 是 可 以 访问 字符 在 转 义 之 前 的 形式 。 获 取 原 
始 字符 串 值 的 最 简单 方式 是 使 用 内 置 的 String.raw() 标签 。 例 如 : 


let message1 = `Multiline\nstring`, 
message2 = String.raw Multiline\nstring ; 


console.log(message1); // "Multiline 
AAS GE 
console.log(message2); // “Multiline\\nstring" 


此 代码 中 ， messager 中 的 \n 被 解释 为 一 个 换行 ， 而 message2 中 的 \n 返回 了 它 的 原始 
形式 man ( 反 斜 线 与 n 字符 ) 。 在 必要 时 ， 如 此 提取 原始 字符 串 信 息 可 以 进行 更 复杂 的 
处 理 。 


字符 串 的 原始 信息 同样 会 被 传递 给 模板 标签 。 标 签 函 数 的 第 一 个 参数 为 包含 额外 raw 属性 的 
数组 ， 而 raw 属性 则 是 含有 与 每 个 We 台 值 的 数组 。 > literals[0] 的 
值 总 是 等 价 于 literals.raw[0] 的 值 ， 后 者 包含 字符 持 串 的 原始 信息 息 。 知 道 这 些 之 后 ， 你 可 以 
用 如 下 代码 来 模拟 string.raw() 





function raw(literals, ...substitutions) { 
let result = ""; 
// 仅 使 用 substitution 的 元 素数 量 来 进行 循环 
for (let i = 0; i < substitutions.length; i++) { 
result += literals.raw[i]; // 改 为 使 用 原始 值 


result += substitutions[i]; 
// 添加 最 后 一 个 字面 量 
result += literals.raw[literals.length - 1]; 


return result; 


let message = raw Multiline\nstring ; 


console.log(message) ; // “Multiline\\nstring" 
console.log(message. length); Hie AUT 


这 里 使 用 literals.raw 而 非 literals 来 输 出 结果 字符 串 2 这 意味 着 任何 转 义 字符 (包括 
Unicode 码 点 的 转 义 ) 都 会 以 原始 的 形式 返回 。 若 想 在 输出 的 字符 串 中 包含 转 义 字 符 ， 原 始 
字符 串 会 很 有 帮助 。 例 如 ， 若 想 要 生成 包含 代码 的 文档 ， 那 么 应 当 输 出 实际 的 原始 代码 而 非 


转 义 后 的 结果 。 
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. 


具备 了 完整 的 Unicode X44 > JS 就 能 以 合理 的 方式 处 理 UTF-16 字符 。 通 过 codePointat() 
与 string.fromCodePoint() 在 码 点 和 字符 之 间 转 换 ， 是 字符 串 操作 能 力 的 一 大 进步 。 正 则 表 
达 式 新 增 的 u 标志 让 直接 操作 码 点 而 不 是 16 位 字符 变 为 可 能 ， 而 normalize() 方法 则 允 
许 进行 更 准确 的 字符 囊 比 较 。 


ES6 也 添加 了 操作 字符 串 的 新 方法 ， 人 允许 你 更 容易 识别 子 字 符 串 ， 而 不 用 在 意 它 在 父 字符 串 
中 的 位 置 。 正 则 表达 式 同样 引入 了 许多 功能 。 


模板 字面 量 是 ES6 的 一 项 重要 补充 ， 允 许 你 创建 领域 专用 语言 ( DSL ) ， 让 字符 串 的 创建 更 
容易 。 能 将 变量 直接 调 入 到 模板 字面 量 中 ， 意 味 着 开发 者 在 组 合 长 字符 串 与 变量 时 ， 有 了 一 
种 比 字 符 串 拼接 更 为 安全 的 工具 。 

内 置 的 多 行 字符 串 支持 ， 超 越 了 普通 JS 字符 串 的 能 力 ， 这 让 模板 字面 量 的 升级 更 加 有 用 。 尽 
管 在 模板 字面 量 中 允许 直接 使 用 换行 ， 你 依然 可 以 使 用 \n 或 其 它 字符 转 义 序列 。 

模板 标签 是 创建 DSL 最 重要 的 部 分 。 标 签 是 接收 模板 字面 量 片段 作为 参数 的 函数 ， 你 可 以 使 
用 它们 来 返回 合适 的 字符 事 。 传 入 参数 包括 了 字面 量 、 等 价 的 原始 值 以 及 普 换 位 的 值 ， 标签 
使 用 这 些 信息 片段 来 决定 输出 。 


第 三 章 函数 


函数 在 任何 编程 语言 中 都 是 非常 重要 的 一 部 分 ， 而 从 JS 诞生 起 ， 一 直到 ES6 ZA? HAM 
未 有 较 大 的 变化 。 这 积压 了 诸多 问题 及 细微 行为 差异 ， 由 此 容 多 诱发 错误 ， 并 且 经 常 需要 用 
大 量 代码 来 实现 非常 基本 的 功能 。 


ES6 的 函数 考虑 了 JS 开发 者 多 年 的 抱怨 与 诉求 ， 大 踏步 ， 在 ES5 函数 基础 上 实现 了 不 
少 增 量 改进 ， 让 JS 更 加 强大 ， 同 时 编程 错误 也 更 少 。 


o 带 参 数 默 认 值 的 函数 
o 在 ES5 中 模拟 参数 默认 值 
o ES6 中 的 参数 默认 值 
o 参数 默认 值 如 何 影响 arguments AR 
o 参数 默认 值 表 达 式 
o 参数 默认 值 的 暂时 性 死 区 
o 使 用 不 具名 参数 
o ES5 中 的 不 具名 参数 
o "e 
m 参数 的 限制 条 件 
~ 影响 arguments 对 象 


en = 
z= b> 
ne y > 


© ESG 的 名 称 属性 
o 选择 合适 的 名 称 
o 名 称 属性 的 特殊 情况 
e 明确 函数 的 双重 用 途 
o 在 ES5 中 判断 函数 如 何 被 调用 
o new.target 元 属性 
© 块 级 函数 
o 决定 何 时 使 用 块 级 函数 
o 非 严 格 模式 的 块 级 函数 


e mk BK 
o 箭头 函数 语法 
o 创建 立即 调用 函数 表达 式 
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o 箭头 函数 与 数组 
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o 有 何不 同 ? 
如 何 控制 尾 调用 优化 


[e] 
o 
e 总 结 


带 参 数 默 认 值 的 函数 


JS 有 函数 的 独特 之 处 是 可 以 接受 任意 数量 的 参数 ， 而 无 视 函 数 声明 处 的 形 参 数量 。 这 让 你 定义 
的 函数 可 以 使 用 不 同 的 参数 数量 来 调用 ， 而 未 提供 的 参数 经 常会 使 用 默认 值 来 代替 。 本 章 将 

介绍 默认 的 参数 值 在 ES6 前 后 是 如 何 实现 的 ， 顺 带 介绍 的 内 容 还 有 : arguments 对 象 的 一 

些 重要 信息 ， 将 表达 式 作为 参数 使 用 ， 以 及 另 一 种 形式 的 TDZ 。 


在 ES5 中 模拟 参数 默认 值 
在 ES5 或 更 早 的 版 本 中 ， 你 或 许 会 使 用 以 下 模式 来 创建 带 有 参数 默认 值 的 函数 : 


function makeRequest(url, timeout, callback) { 


timeout = timeout || 2000; 
callback = callback || function() {}; 


在 本 例 中 ， timeout 4 callback 实际 上 都 是 可 选 参 数 ， 因 为 他 们 都 会 在 参数 未 被 提供 的 情 
况 下 使 用 默认 值 。 逻 辑 或 运算 答 ( || ) 在 左 侧 的 值 为 假 值 ( falsy ) 的 情况 下 总 会 返回 右 

侧 的 操作 数 。 由 于 函数 的 具名 参数 在 未 被 明确 提供 时 会 是 undefined ， 逻 辑 或 运 莫 符 就 经 常 
被 用 来 给 缺失 的 参数 提供 默认 值 。 不 过 此 方法 有 个 瑕 疯 ， 此 处 的 timeout 的 有 效 值 实际 上 有 
可 能 是 o ， 但 因为 o 是 假 值 ， 就 会 导致 timeout 的 值 在 这 种 情况 下 被 替换 为 2000 ° 


在 这 种 情况 下 ， 更 安全 的 选择 是 使 用 typeof 来 检测 参数 的 类 型 ， 正 如 下 例 : 


function makeRequest(url, timeout, callback) { 


timeout = (typeof timeout !== "undefined") ? timeout : 2000; 
callback = (typeof callback !== "undefined") ? callback : function() {}; 
// 函数 的 剩余 部 分 


尽管 这 种 方式 更 安全 ， 却 为 实现 一 个 基本 需求 而 书写 了 过 多 的 代码 。 它 代表 了 一 种 常见 模 
式 ， 充 斤 在 各 种 流行 的 JS 库 中 。 


ES6 中 的 参数 默认 值 


ESG 能 更 容易 地 为 参数 提供 默认 值 ， 它 使 用 了 初始 化 形式 ， 以 便 在 参数 未 被 正式 传递 进来 时 
使 用 。 例 如 : 
function makeRequest(url, timeout = 2000, callback = function() {}) { 


// S399 Rl AEB 


此 函数 只 要 求 始终 提供 第 一 个 参数 。 其 余 两 个 参数 则 都 有 默认 值 ， 这 就 无 需 再 添加 更 多 代码 
来 检查 缺失 的 参数 值 ， 让 函数 体 更 为 小 巧 。 


若 完 整 使 用 三 个 参数 来 调用 makeRequest() ， 那 么 默认 值 将 不 会 被 用 到 ， 例 如 : 


// 使 用 默认 的 timeout 与 callback 
makeRequest("/foo"); 


// 使 用 默认 的 callback 
makeRequest("/foo", 500); 


// 不 使 用 默认 值 


makeRequest("/foo", 500, function(body) { 
doSomething(body) ; 


3); 
ES6 会 认为 url 参数 是 必须 的 ， 因 此 三 次 调用 makerequest() 都 必须 传 入 "/foo" ° WA 
默认 值 的 两 个 参数 则 都 被 认为 是 可 选 的 。 
在 函数 声明 中 能 指定 任意 一 个 参数 的 默认 值 ， 即 使 之 后 还 存在 未 指定 默认 值 的 参数 。 例 如 ， 
下 面 这 样 是 可 行 的 : 

function makeRequest(url, timeout = 2000, callback) { 


// 函数 的 剩余 部 分 


在 本 例 中 只 有 在 未 传递 第 二 个 参数 3 或 明确 将 第 二 个 参数 值 指定 为 undefined 时 ， 
timeout 的 默认 值 才 会 被 使 用 ， 例 如 : 


// 使 用 默认 的 timeout 

makeRequest("/foo", undefined, function(body) { 
doSomething(body) ; 

3); 


// 使 用 默认 的 timeout 
makeRequest("/foo"); 


// 不 使 用 默认 值 
makeRequest("/foo", null, function(body) { 


doSomething(body); 
3); 


在 这 个 例子 中 ， null 值 被 认为 是 有 效 参 数 ， 意 味 着 对 于 makeRequest ( ) 的 第 三 次 调用 并 不 
会 使 用 timeout 的 默认 值 a 


参数 默认 值 如 何 影响 arguments 对 象 


需要 记 住 的 是 ， arguments 对象 会 在 使 用 参数 默认 值 时 有 不 同 的 表现 。 在 ES5 的 非 严 格 模 
式 下 ， arguments 对 象 会 反映 出 具名 参数 的 变化 。 以 下 代码 说 明了 该 工作 机 制 : 


function mixArgs(first, second) { 


console.log(first === arguments[0]); 
console.log(second === arguments[1]); 
first = tei 
second = "d"; 
console.log(first === arguments[0]); 
console.log(second === arguments[1]); 


} 


mixArgs("a", "b"); 


输出 : 


true 
true 
true 
true 


在 非 严 格 模式 下 ， arguments 对 象 总 是 会 被 更 新 ， 以 反映 出 具名 参数 的 变化 。 因 此 当 first 
与 Second ES RIT Ha ” arguments[01] 与 arguments[1] 也 就 相应 被 更 新 让 这 里 所 
有 的 === 严格 比较 的 结果 都 为 true 。 


然而 在 ESS 的 严格 模式 下 ， 消 除了 关于 arguments 对 象 的 这 种 混乱 情况 ， 它 不 再 反映 出 具 
名 参数 的 变化 。 在 严格 模式 下 重新 使 用 上 例 中 的 函数 : 


function mixArgs(first, second) { 
"use strict"; 


console.log(first === arguments[0]); 
console.log(second === arguments[1]); 
first = "c"; 

second = "qd" 

console.log(first === arguments[0]); 
console.log(second === arguments[1]); 


mixArgs("a", "b"); 


调用 mixArgs() 则 输出 : 


true 
true 
false 
false 


这 一 次 更 改 first 与 second 就 不 会 再 影响 arguments 对 和 象 ， 因 此 输出 结果 符合 通常 的 期 


o 


KB 


然而 在 使 用 ES6 参数 默认 值 的 函数 中 ， 无 论 函 数 是 否 明 确 运 行 在 严格 模式 下 ， arguments 
对 象 的 表现 总 是 会 与 ES5 的 严格 模式 一 致 2 参数 默认 值 的 存在 触发 了 arguments 对 象 与 具 
名 参数 的 分 离 。 这 是 个 细微 但 重要 的 细节 ， 表 示 arguments 对 象 的 使 用 方式 发 生 了 变化 。 研 
究 如 下 代码 : 


// 非 严 格 模式 

function mixArgs(first, second = "b") { 
console.log(arguments.length); 
console.log(first === arguments[0]); 
console.log(second === arguments[1]); 
first = "c"; 
second = "d" 
console.log(first === arguments[0]); 
console.log(second === arguments[1]); 


mixArgs("a"); 


输出 : 


本 例 中 arguments.length 的 值 为 1 ， 为 只 给 mixArgs() 传递 了 一 个 参数 。 这 也 意味 着 
arguments[1] 的 值 是 undefined ， 符合 将 单个 参数 传递 给 函数 时 的 预期 ; 这 同时 意味 着 
first 与 arguments[0] 是 相等 的 9 无 论 是 否 在 严格 模式 下 ， 改变 first 和 second 的 值 
不 会 对 arguments 对 象 造 成 影响 ， 所 以 arguments 对 象 始终 能 映射 出 初始 调用 状态 。 


参数 默认 值 表 达 式 


参数 默认 值 最 有 趣 的 特性 ， 或 许 就 是 默认 值 并 不 非得 是 基本 类 型 值 。 例 如 ， 你 可 以 执行 一 个 
函数 来 产生 参数 的 默认 值 ， 就 像 这 样 : 


function getValue() { 
return 5; 


} 


function add(first, second = getValue()) { 
return first + second; 


} 
console.log(add(i, 1)); Ui P 
console.log(add(1)); // 6 


此 处 若 未 提供 第 二 个 参数 ， getvalue() 函数 就 会 被 调用 以 获取 正确 的 默认 值 。 需 要 注意 的 
是 ， 仅 在 调用 add() 函数 而 未 提供 第 二 个 参数 时 ， getvalue() 函数 才 会 被 调用 ， 而 在 
add() 的 函数 声明 初次 被 解析 时 并 不 会 进行 调用 。 这 意味 着 getvalue() 函数 若 被 写 为 可 变 
的 ， 则 默认 参数 获取 的 值 有 可 能 也 会 变化 ， 例 如 : 


let value = 5; 


function getValue() { 
return value++; 


} 


function add(first, second = getValue()) { 
return first + second; 


} 
console.log(add(1, 1)); Ub ee 
console.log(add(1)); // 6 


console.log(add(1)); Vie u 


本 例 中 value 的 初始 值 是 5， 并 且 会 随 着 对 getValue() 的 每 次 调用 而 递增 。 首 次 调用 
add(1) 返回 的 值 为 6， 再 次 调用 时 value 的 值 已 被 增加 ， 于 是 返回 了 7 ° HT second 参 
数 的 默认 值 总 是 在 add() 函数 被 调用 的 情况 下 才 被 计算 ， 因 此 该 参数 的 值 随时 都 会 被 改变 。 


将 函数 调用 作为 参数 的 默认 值 时 需要 小 心 ， 如 果 你 遗漏 了 括号 ， 例 如 在 上 面 例子 中 使 用 
second = getValue  ， 你 就 传递 了 对 于 该 函数 的 一 个 引用 ， 而 没有 传递 调用 该 函数 的 结 
果 o 
这 种 行为 引出 了 另 一 种 有 趣 的 能 力 : 可 以 将 前 面 的 参数 作为 后 面 参数 的 默认 值 ， 此 处 有 个 例 
J 


function add(first, second = first) { 
return first + second; 


} 
console.log(add(1, 1)); if 
console.log(add(1)); Ly 2 


此 代码 中 first A second 参数 提供 了 默认 值 ， 意味 着 只 传 入 一 个 参数 会 让 两 个 参数 获得 相 
同 的 值 ， 因此 add(1, 1) 与 add(1) 同样 返回 了 2。 再 进一步 ， 你 还 能 将 first 作为 参数 
传递 给 一 个 函数 来 产生 second 参数 的 值 ， 正 如 下 例 : 


function getValue(value) { 
return value + 5; 


} 


function add(first, second = getValue(first)) { 
return first + second; 


} 
console.log(add(i, 1)); Hie 
console.log(add(1)); H 


此 例 将 second 的 值 设 为 等 于 getValue(first) 函数 的 返回 值 ， 因 此 add(1) 会 返回 7 (1 
+6) ° 1 add(1, 1) 仍然 返回 2。 


引用 其 他 参数 来 为 参数 进行 默认 赋值 时 ， 仅 允许 引用 前 方 的 参数 ， 因 此 前 面 的 参数 不 能 向 后 
访问 ， 例 如 : 


function add(first = second, second) { 
return first + second; 


} 


console.log(add(1, 1)); Ui @ 
console.log(add(undefined, 1)); // 抛 出 错误 


调用 add(undefined, 1) 发 生 了 错误 ， 这 是 由 于 second 在 first 之 后 定义 ， 因 此 不 能 将 其 
作为 后 者 的 默认 值 。 为 了 理解 这 种 情况 的 成 因 ， 需 着 重 回顾 “暂时 性 死 区 "概念 。 


参数 默认 值 的 暂时 性 死 区 

第 一 章 介 绍 了 le 与 const 的 暂时 性 死 区 (TDZ) ， 而 参数 默认 值 同 样 具 有 暂时 性 死 

区 。 与 let 声明 相似 ， 兄 数 每 个 参数 都 会 创建 一 个 新 的 标识 符 绑 定 ， 它 在 初始 化 之 前 不 允许 
被 访问 ， 否 则 会 抛 出 错误 。 参 数 初始 化 会 在 函数 被 调用 时 进行 ， 无 论 是 给 参数 传递 了 一 个 
值 、 还 是 使 用 了 参数 的 默认 值 。 


为 了 探索 参数 默认 值 中 的 暂时 性 死 区 ， 可 再 次 研究 “参数 默认 值 表 达 式 "中 的 例子 : 


function getValue(value) { 
return value + 5; 


} 


function add(first, second = getValue(first)) { 
return first + second; 


} 
console.log(add(1, 1)); Uf 2 
console.log(add(1)); Via 


调用 add(1, 1) 和 add(1) 事实 上 执行 了 以 下 代码 来 创建 first 与 second 的 参数 值 : 


// JS 调用 add(1, 1) 可 表示 为 
let first = 1; 
let second = 1; 


// JS 调用 add(1) 可 表示 为 
let fins = 1; 
let second = getValue(first); 


4 BA add() 第 一 次 执行 时 > first 与 second 的 绑 定 被 加 入 了 特定 参数 的 暂时 性 死 区 
(AMF let 声明 的 行为 ) 。 因 此 second 可 以 使 用 first 来 初始 化 ， 因 为 此 处 first 
已 完成 了 初始 化 ， 但 反之 则 不 行 。 现 在 再 研究 以 下 重 写 过 的 add() BK: 


function add(first = second, second) { 
return first + second; 


} 


console.log(add(1, 1)); 1/2 
console.log(add(undefined, 1)); // 抛 出 错误 


本 例 中 调用 add(1, 1) 与 add(undefined, 1) 对 应 着 以 下 的 后 台 代 码 : 


// JS 调用 add(1, 1) 可 表示 为 
let first = 1; 
let second = 1; 


// JS 调用 add(1) 可 表示 为 
let first = second; 
let second = 1; 


本 例 中 调用 add(undefined，1) 抛 出 了 错误 ， 是 因为 在 对 first 进行 初始 化 时 ， second 尚 
未 被 初始 化 。 此 处 的 second 位 于 暂时 性 死 区 内 ， 对 second 的 引用 就 抛 出 了 错误 ， 正 如 第 
一 章 讨论 过 的 let 绑 定 的 行为 。 


函数 参数 拥有 各 自 的 作用 域 和 暂时 性 死 区 ， 与 函数 体 的 作用 域 相 分 离 ， 这 意味 着 参数 的 
默认 值 不 允许 访问 在 函数 体内 部 声明 的 任意 变量 。 


使 用 不 具名 参数 


到 目前 为 止 ， 本 章 的 例子 只 涵盖 了 在 函数 定义 中 的 已 被 命名 的 参数 。 然 而 JS 的 函数 并 不 强求 
参数 的 数量 要 等 于 已 定义 具名 参数 的 数量 ， 实 际 所 传递 的 参数 允许 少 于 或 多 于 正式 指定 的 参 
数 。 参 数 的 默认 值 让 函数 在 接收 更 少 参数 时 的 行为 更 清晰 ， 而 ES6 试图 让 相反 情况 的 问题 也 
被 更 好 地 解决 。 


ES5 中 的 不 具名 参数 


JS 早 就 提供 了 arguments 对 象 用 于 查看 传递 给 函数 的 所 有 参数 ， 这 样 就 不 必 分 别 指 定 每 个 
参数 。 虽 然 查 看 arguments 对 稼 在 大 多 数 情况 下 都 工作 正常 ， 但 操作 它 有 时 仍然 较为 麻烦 。 
例如 ， 参 考 以 下 查看 arguments 对 象 的 代码 : 


function pick(object) { 
let result = Object.create(null); 


// 从 第 三 个 参数 开始 处 理 
for (let 1 = 1, len = arguments.length; i < len; i++) { 
result[arguments[i]] = object[arguments[i]]; 


} 
return result; 

} 

let book = { 
title: "Understanding ES6", 
author: "Nicholas C. Zakas", 
year: 2015 

J; 


let bookData = pick(book, "author", "year"); 


console.log(bookData. author); // “Nicholas C. Zakas" 
console.log(bookData. year); // 2015 


此 有 函数 模拟 了 Underscore.js 代码 库 的 pick() 方法 ， 能 够 返回 包含 原 有 对 象 特定 属性 的 子 
集 副本 。 本 例 中 只 为 函数 定义 了 一 个 期 望 参数 ， 也 就 是 找 贝 属性 的 来 源 对 象 ， 除 此 之 外 传递 
的 所 有 参数 则 都 是 需要 拷贝 的 属性 的 名 称 。 


这 个 pick() 函数 有 两 点 需要 注意 。 首 先 ， 完 全 看 不 出 该 函数 具备 处 理 多 个 参数 的 能 力 ， 就 
算 为 其 再 多 定义 几 个 参数 ， 但 依然 不 足以 标明 它 能 处 理 任意 数量 的 参数 。 其 次 ， 由 于 第 一 个 
参数 被 命名 并 被 直接 使 用 ， 当 你 寻找 需要 复制 的 属性 时 ， 就 必须 从 arguments 对 象 索 引 位 置 
1 而 非 位 置 0 开始 处 理 。 要 记 住 使 用 arguments 的 适当 索引 值 或 许 不 困难 ， 但 毕竟 多 了 一 件 
挂 心 之 事 。 


ES6 引入 了 剩余 参数 以 便 解决 此 问题 。 


剩余 参数 
剩余 参数 ( rest parameter ) 由 三 个 点 ( ..，) 与 一 个 紧 跟 着 的 具名 参数 指定 ， 它 是 包含 


传递 给 函数 的 其 余 参 数 的 一 个 数组 ， 由 此 得 名 “剩余 "。 例 如 ， pick() 函数 可 以 像 下 面 这 样 用 


function pick(object, ...keys) { 
let result = Object.create(null); 


for (let i = 0, len = keys.length; i < len; i++) { 
result[keys[i]] = object[keys[i]]; 


return result; 


在 此 版 本 的 函数 中 ， keys 是 一 个 剩余 参数 ， 包 含 所 有 在 object ZEWA? KARIM 
有 参数 的 arguments 不 同 ， 后 者 连 第 一 个 参数 都 会 包含 i 这 意味 着 你 无 需 有 了 所 顾虑 ， 可 以 对 
keys 从 头 到 尾 进 行 闪 代 。 作 为 一 个 额外 的 收益 ， 通 过 观察 该 泡 数 声明 便 能 判明 它 具 有 处 理 

任意 数量 参数 的 能 力 。 


BRAY length 属性 用 于 指示 具名 参数 的 数量 ， 而 剩余 参数 对 其 毫 无 影响 。 此 例 中 
pick() 函数 的 length 属性 值 是 1， 因 为 只 有 object 参数 被 用 于 计算 该 值 。 


译注 ;: APTA HAP E o BAMA TRUK? BM length 属性 不 包含 使 用 默认 值 
的 参数 ， 并 且 它 只 能 指示 出 第 一 个 默认 参数 之 前 的 具名 参数 数量 。 例 如 对 于 function 
example(first, second = 'woo', third) {} 函数 声明 来 说 ， length 的 值 是 4 而 非 2 
， 尽 管 这 里 有 两 个 无 默认 值 的 具名 参数 。 


剩余 参数 的 限制 条 件 


剩余 参数 受到 两 点 限制 。 一 是 函数 只 能 有 一 个 剩余 参数 ， 并 且 它 必须 被 放 在 和 最后。 例如， 如 
下 代码 是 无 法 工作 的 : 


// 语法 错误 : 不 能 在 剩余 参数 后 使 用 具名 参数 
function pick(object, ...keys, last) { 
let result = Object.create(null); 


for (let i = 0, len = keys.length; i < len; i++) { 
result[keys[i]] = object[keys[i]]; 


return result; 


此 处 的 last 跟 在 了 剩余 参数 keys 后 面 ， 这 会 导致 一 个 语法 错误 。 


第 二 个 限制 是 剩余 参数 不 能 在 对 象 字 面 量 的 setter 属性 中 使 用 ， 这 意味 着 如 下 代码 同样 会 导 
致 语法 错误 : 


let object = { 


// 语法 错误 : 不 能 在 setter 中 使 用 剩余 参数 
set name(...value) { 
// 一 些 操作 


}; 


存在 此 限制 的 原因 是 : 对 象 字面 量 的 setter 被 限定 只 能 使 用 单个 参数 ; 而 剩余 参数 按照 定义 
是 不 限制 参数 数量 的 ， 因 此 它 在 此 处 不 被 许可 。 


剩余 参数 如 何 影响 arguments 对 象 

设计 剩余 参数 是 为 了 替代 ES 中 的 arguments 对 象 。ES4 曾经 移 除 了 arguments 并 添加 了 
剩余 参数 ， 以 便 允 许 向 函数 传 入 不 限 数量 的 参数 。 尽 管 ES4 规范 被 废弃， 但 这 个 想法 被 保持 
下 来 ， 并 在 ES6 中 被 重新 引入 ， 不 过 arguments 仍 得 以 保留 。 


arguments 对 象 在 函数 被 调用 时 反映 了 传 入 的 参数 ， 与 剩余 参数 能 协同 工作 ， 就 像 如 下 程序 
所 演示 的 : 


function checkArgs(...args) { 
console.log(args.length); 
console.log(arguments.length); 
console.log(args[0], arguments[0]); 
console.log(args[1], arguments[1]); 


} 


checkArgs( "a", "b"); 


调用 checkArgs() 输出 了 : 


oT M9 DD 


o o 


arguments 对 象 总 能 正确 反映 被 传 入 函数 的 参数 ， 而 无 视 剩 余 参 数 的 使 用 。 


如 


对 剩余 参数 需要 了 解 的 内 容 已 介绍 完毕 ， 你 可 以 将 其 投入 使 用 了 。 


泡 数 构造 器 的 增强 


Function 构造 器 允许 你 动态 创建 一 个 新 函数 ， 但 在 JS 中 并 不 常用 。 传 给 该 构造 器 的 参数 都 
是 字符 串 ， 它 们 就 是 目标 函数 的 参数 与 函数 体 ， 此 处 有 个 范例 : 


var add = new Function("first", "second", "return first + second"); 


console.log(add(1, 1)); UP 


ES6 增强 了 Function 构造 器 的 能 力 ， 允 许 使 用 默认 参数 以 及 剩余 和 参数。 对 于 默认 参数 来 
说 ， 你 只 需 为 参数 名 称 添加 等 于 符号 以 及 默认 值 ， 正 如 下 例 : 


var add = new Function("first", "second = first", 
neturm LES Secondi), 


console.log(add(1, 1)); UG? 


console.log(add(1)); // 2 


在 此 例 中 ， 当 只 传递 了 一 个 参数 时 ， first 的 值 会 被 赋 给 second 参数 ， 此 处 的 语法 与 不 使 
用 Function 的 函数 声明 一 致 。 


而 对 剩余 参数 来 说 ， 只 需 在 最 后 一 个 参数 前 添加 ..， 即 可 ， 就 像 这 样 : 
var pickFirst = new Function("...args", "return args[0]"); 


console.log(pickFirst(1, 2));  // 1 


此 代码 创建 了 一 个 仅 使 用 剩余 参数 的 函数 ， 让 其 返回 所 传 入 的 第 一 个 参数 。 


为 Function 构造 器 添加 默认 参数 与 剩余 参数 ， 确 保 了 它 拥 有 与 函数 声明 形式 相同 的 所 有 能 
Hn o 


扩展 运算 符 


与 剩余 参数 关联 最 密切 的 就 是 扩展 运 工 符 。 剩 余 参 数 允 许 你 把 多 个 独立 的 参数 合并 到 一 个 数 
组 中 ; 而 扩展 运算 符 则 允许 将 一 个 数组 分 割 ， 并 将 各 个 项 作为 分 离 的 参数 传 给 函数 。 考 虑 一 
下 Math.max() 方法 ， 它 接受 任意 数量 的 参数 ， 并 会 返回 其 中 的 最 大 值 。 此 处 有 个 简单 用 
例 : 


let value1 = 25, 
Value2 = 50; 


console.log(Math.max(value1, value2)); // 50 
若 像 本 例 这 样 仅 处 理 两 个 值 ， 那么 仅 需 将 这 两 个 值 直接 传 入 Math.max() ? 较 大 的 那个 就 会 


成 为 返回 值 。 但 如 何 处 理 数 组 中 的 多 个 值 呢 ? Math.max() 方法 并 不 允许 你 传 入 一 个 数组 ， 
因此 在 ES5 或 更 早 版 本 中 ， 要 么 自行 搜索 整个 数组 ， 要 么 像 下 面 这 样 使 用 apply() 方法 : 


let values = [25, 50, 75, 100] 

console.log(Math.max.apply(Math, values)); // 100 
该 解决 方案 是 可 行 的 ， 但 这 样 使 用 apply() 会 稍微 令 人 疑惑 ， 它 使 用 额外 语法 而 混淆 了 代码 
HARSHA” 


ES6 的 扩展 运算 符 令 这 种 情况 变 得 简单 。 无 须 调 用 apply ， 你 可 以 在 该 数组 前 添加 
并 直接 将 其 传递 给 Math.max() ? 就 像 使 用 剩余 参数 那样 > JS 引 擎 将 会 将 该 数组 分 割 为 独立 
参数 并 把 它们 传递 进去 : 

let values = [25, 50, 75, 100] 

// ¥%¥ console.log(Math.max(25, 50, 75, 100)); 


console.log(Math.max(...values)); // 100 


如 此 调用 Math.max() 更 接近 传统 形式 ， 并 避免 了 为 一 个 简单 数学 操作 使 用 复杂 的 this OP 
定 ( 即 在 上 个 例子 中 提供 给 Math.max.apply() 的 第 一 个 参数 ) © 


你 可 以 将 扩展 运算 符 与 其 他 参数 混用 。 假 设 你 想 让 Math.max() 返回 的 最 小 值 为 0， 以 忽略 
数组 内 的 负 值 ， 可 以 将 参数 0 单独 传 入 ， 并 继续 为 其 他 参数 使 用 扩展 运算 符 ， 正 如 下 例 : 


let values = [-25, -50, -75, -100] 


console.log(Math.max(...values, 0)); Limo 


本 例 中 传 给 Math.max() 的 最 后 一 个 参数 是 o ， 它 跟 在 使 用 扩展 运算 符 的 其 他 参数 之 后 。 


用 扩展 运算 符 传递 参数 ， 让 函数 更 容易 用 数组 作为 参数 ， 在 大 部 分 场景 中 ， 扩 展 运 算 符 都 是 
apply() 方法 的 合适 替代 品 。 


关于 ES6 中 的 默认 参数 与 剩余 参数 ， 除 了 你 至 今 看 到 的 用 法 之 外 ， 还 可 以 在 Function 构造 
器 中 使 用 它们 。 
ES6 的 名 称 属 性 


定义 函数 有 各 种 各 样 的 方式 ， 在 JS 中 识别 函数 因此 变 得 很 有 挑战 性。 此外， 匿名 函数 表达 式 
的 流行 使 得 调试 有 点 困难 ， 经 常 导 致 堆栈 跟踪 难以 被 阅读 与 解释 。 为 此 ，ES6 AMA BAM 
加 了 name Æt 2 


选择 合适 的 名 称 


ES 中 所 有 元 数 都 有 适当 的 name 属性 值 。 为 了 理解 其 实际 运作 ， 请 看 下 例 一 一 它 展 示 了 一 
函数 与 一 个 函数 表达 式 ， 并 将 二 者 的 name 属性 都 打印 出 来 : 


function doSomething() { 


I e 
} 
var doAnotherThing = function() { 
Life Taste 
J; 
console.log(doSomething.name) ; // “doSomething" 
console.log(doAnotherThing. name) ; // "“doAnotherThing" 


在 此 代码 中 ， 由 于 dosomething() 是 一 个 函数 声明 ， 它 就 拥有 一 个 值 为 "dosomething" 的 
name 属性 。 而 匿名 函数 表达 式 doAnotherThing() 的 name 属性 值 则 是 "doAnotherThing" 
， 因 为 这 是 该 函数 所 赋值 的 变量 的 名 称 。 


译注 : 匿名 函数 的 名 称 属 性 在 FireFox 与 Edge 中 仍然 不 被 支持 ， 值 为 空 字 符 串 ， 
Chrome 直到 51.0 版 本 才 提 供 了 该 特性 。 


aN 


名 称 属 性 的 特殊 情况 


虽然 函数 声明 与 函数 表达 式 的 名 称 易 于 确定 ， 但 ES6 还 做 了 更 多 规定 以 确保 所 有 元 数 都 拥有 
合适 的 名 称 。 为 了 表明 这 点 ， 请 参考 如 下 程序 : 


var doSomething = function doSomethingElse() { 
Wd sae 


}; 


var person = { 
get firstName() { 
return "Nicholas" 
}, 
sayName: function() { 
console.log(this.name) ; 


console.log(doSomething.name) ; // “doSomethingElse" 
console.log(person.sayName.name) ; // "sayName" 


var descriptor = Object.getOwnPropertyDescriptor(person, "firstName"); 
console.log(descriptor.get.name); // "get firstName" 


本 例 中 的 doSomething .name 的 值 是 "doSomethingElse" ? 因为 该 函数 表达 式 自 己 拥有 一 个 名 
称 ， 并 且 此 名 称 的 优先 级 要 高 于 赋值 目标 的 变量 名 。 person.sayName() 的 name 属性 值 是 
"sayName" ， 正 如 对 象 字 面 量 指定 的 那样 。 类 似 的 ， person.firstName 实际 是 个 getter H 
数 ， 因 此 它 的 名 称 是 "get firstName" ， 以 标明 它 的 特征 ; 同样 setter 函数 也 会 带 有 
"set" 的 前 级 ( getter 与 setter 有 函数 都 必须 用 object.getownPropertyDescriptor() 来 检 


索 ) 。 


函数 名 称 还 有 另外 两 个 特殊 情况 。 使 用 bind() 创建 的 函数 会 在 名 称 属 性 值 之 前 带 有 
"bound" 前 级 ; 而 使 用 Function 构造 器 创建 的 函数 ， 其 名 称 属性 为 "anonymous" ， 正 如 此 
例 : 


var doSomething = function() { 
HE von 


}; 
console.log(doSomething.bind().name) ; // “bound doSomething" 


console.log( (new Function()).name); // "anonymous" 


绑 定 产生 的 函数 拥有 原 函 数 的 名 称 ， 并 总 会 附带 "pound" 前 级， 因此 dosomething() AAcy 
绑 定 版 本 的 名 称 为 "bound doSomething" ° 


TRIR?’ HH name 属性 值 未 必 会 关联 到 同名 变量 。 name 属性 是 为 了 在 调试 
时 获得 有 用 的 相关 信息 ， 所 以 不 能 用 name 属性 值 去 获取 对 有 函数 的 引用 。 


明确 函数 的 双重 用 途 


在 ES5 以 及 更 早 版 本 中 ， 函 数 根据 是 否 使 用 new 去 调用 而 有 双重 用 途 。 当 使 用 new 时 ， 
函数 内 部 的 this 是 一 个 新 对 象 ， 并 作为 函数 的 返回 值 ， 如 下 例 所 示 : 


function Person(name) { 
this.name = name; 


} 


var person = new Person("Nicholas"); 
var notAPerson = Person("Nicholas"); 


console.log(person); // “[Object object]" 
console.log(notAPerson); // "undefined" 


当 调 用 Person() 来 创建 notAPerson 时 ， 未 使 用 new ? 输出 了 undefined ° 并 且 在 非 严 
格 模式 下 给 全 局 对 象 添加 了 name 属 小 ° Person 首 字 母 大 写 是 指示 其 应 当 使 用 new 来 调 
用 的 唯一 标识 ， 这 在 JS 编程 中 是 个 惯例 。 函 数 双重 角色 的 混乱 情况 在 ES6 中 发 生 了 一 些 改 


IR 
又 ° 


JS 为 函数 提供 了 两 个 不 同 的 内 部 方法 : [[call]] 与 [[construct]] 。 当 未 使 用 new 进行 

HABA > [[call]] 方法 会 被 执行 ， 运 行 的 是 代码 中 的 函数 体 。 而 当 使 用 new 进行 函数 
调用 时 ， [[construct]] 方法 则 会 被 执行 ， 负 责 创建 一 个 被 称 为 新 目标 的 新 对 象 ， 并 且 将 该 

新 目 标 作为 this 去 执行 函数 体 。 拥有 [[Construct]] 方法 的 函数 被 称 为 构造 器 。 


切记 并 非 所 有 兄 数 都 拥有 [[construct]] 方法 ， 因 此 不 是 所 有 哆 数 都 可 以 用 new KA 


用 。 在 后 面 会 介绍 的 箭头 函数 就 是 个 例外 。 


在 ESS 中 判断 函数 如 何 被 调用 


在 ES5 中 判断 是 否 使 用 了 new AAA BR ( 即 作为 构造 器 ) ， 最 流行 的 方式 是 使 用 
instanceof ， 例 如 : 


function Person(name) { 
if (this instanceof Person) { 
this.name = name; // 使 用 new 
} else { 
throw new Error("You must use new with Person.") 
} 
} 


var person = new Person("Nicholas"); 
var notAPerson = Person("Nicholas"); // 抛 出 错误 


此 处 对 this 值 进 行 了 检查 ， 来 判断 其 是 否 为 构造 器 的 一 个 实例 : 若是 ， 正 常 继续 执行 S 
则 抛 出 错误 。 这 么 做 能 奏效 是 因为 [[construct]] 方法 创建 了 person 的 一 个 新 实例 并 将 其 
赋值 给 this 。 可 惜 该 方法 并 不 绝对 可 靠 ， 因 为 有 时 未 使 用 new 但 this 仍然 可 能 是 
Person 的 实例 ， 正 如 下 例 : 


function Person(name) { 
if (this instanceof Person) { 
this.name = name; // 使 用 new 
} else { 
throw new Error("You must use new with Person.") 
} 
} 


var person = new Person("Nicholas"); 
var notAPerson = Person.call(person, "Michael"); // 奏效 了 | 


调用 Person.call() 并 将 person 变量 作为 第 一 个 参数 传 入 ， 这 意味 着 将 Person 内 部 的 
this 被 设置 为 了 person 。 对 于 该 函数 来 说 ， 没 任何 办 法 能 将 这 种 方式 与 使 用 new 调用 区 
分 开 来 。 


new.target 元 属性 


为 了 解决 这 个 问题 ， ES6 引入 了 new.target 元 属性 。 元 属性 指 的 是 “ 非 对 象 ”( 例 如 new 运 
算 符 ) 上 的 属性 ， 并 提供 关联 目标 的 附加 信息 。 当 函数 的 [[construct]] 方法 被 调用 时 ， 

new 运算 符 的 作用 目标 会 填 入 new.target 元 属性 ， 此 时 函数 体内 部 的 this 值 是 新 创建 的 
RK Bl ， 而 new. target 的 值 正 是 该 实例 的 构造 器 。 而 若 [[cal1]] 被 执行 ， new. target 


的 值 将 会 是 undefined ° 


通过 检查 new.target 这 个 新 的 元 属性 是 否 被 定义 ， 就 能 让 你 安全 地 判断 函数 被 调用 时 是 否 
使 用 了 new ° 


function Person(name) { 
if (typeof new.target !== "undefined") { 
this.name = name; // 使 用 new 
} else { 
throw new Error("You must use new with Person.") 


var person = new Person("Nicholas"); 
var notAPerson = Person.call(person, "Michael"); // 出 错 ! 


使 用 new. target 而 非 this instanceof Person ? Person 构造 器 会 在 未 使 用 new 时 正确 
地 抛 出 错误 


o 


也 可 以 检查 new. target 来 判断 是 否 使 用 特定 构造 器 进行 了 调用 ， 例 如 以 下 代码 : 


function Person(name) { 
if (new.target === Person) { 
this.name = name; // 使 用 new 
} else { 
throw new Error("You must use new with Person.") 


function AnotherPerson(name) { 
Person.call(this, name); 


var person = new Person("Nicholas"); 
var anotherPerson = new AnotherPerson("Nicholas"); // 出 错 | 


在 此 代码 中 ， 为 了 正确 工作 ， new.target 必须 是 Person 。 当 调用 new 
AnotherPerson("Nicholas") 时 ， Person.call(this, name) 也 随 之 被 调用 ， 从 而 抛 出 了 错误 ， 
因为 此 时 在 person 构造 器 内 部 的 new.target 值 为 undefined 《调用 person 时 并 未 使 用 


new ) 。 


警告 : 在 函数 之 外 使 用 new.target 会 导致 语法 错误 。 


ES6 通过 新 增 new.target 而 消除 了 函数 调用 方式 的 不 确定 性 。 在 此 方面 ESS 还 随 之 解决 了 
语言 此 前 另 一 个 不 确定 的 部 分 _ 在 代码 块 内 部 声明 函数 。 
FRI By BX 


在 ES3 或 更 早 版 本 中 ， 在 代码 块 中 声明 函数 ( 即 块 级 函数 ) 严格 来 说 应 当 是 一 个 语法 错误 ， 
但 所 有 的 浏览 器 却 都 支持 该 语法 。 可 惜 每 个 浏览 器 都 有 轻微 的 行为 差异 ， 所 以 最 佳 实践 就 是 
ta ERR AGIA E BR > BAG HY AEE A HA RIK KX © 

为 了 控制 这 种 不 兼容 行为 ， ESS 的 严格 模式 为 代码 块 内 部 的 函数 声明 引入 了 一 种 错误 ， 就 像 
这 样 : 


"use strict"; 


abe (etary) af 
// 在 ESS 会 抛 出 语法 错误 ， ES6 则 不 会 
function doSomething() { 
dhe ee 
} 
} 


在 ES5 中 ， 这 段 代 码 会 抛 出 语法 错误 。 不 过 ES6 会 将 dosomething() 函数 视 为 块 级 声明 ， 
并 允许 它 在 声明 所 在 的 代码 块 内 部 被 访问 。 例 如 


"use strict"; 
ane (Gerais) af 
console.log(typeof doSomething) ; // “function" 


function doSomething() { 


hE ae 
} 
doSomething(); 
} 
console.log(typeof doSomething) ; // "undefined" 


块 级 函数 会 被 提升 到 所 在 代码 块 的 顶部 ， 因 此 typeof doSomething 会 返回 "function" > PP 
便 该 检查 位 于 此 函数 定义 位 置 之 前 。 一 旦 if 代码 块 执行 完毕 ， dosomething() 也 就 不 复 存 
在 。 


决定 何 时 使 用 块 级 函数 


块 级 函数 与 let 函数 表达 式 相 似 ， 在 执行 流 跳 出 定义 所 在 的 代码 块 之 后 ， 函 数 定 义 就 会 被 移 
除 。 关 键 区 别 在 于 : 块 级 函数 会 被 提升 到 所 在 代码 块 的 顶部 ; 而 使 用 let 的 函数 表达 式 则 不 
会 ， 正 如 以 下 范例 所 示 : 
"use strict"; 
Tre 
console.log(typeof doSomething); // 抛 出 错误 


let doSomething = function () { 
TE te 


} 


doSomething(); 
} 


console.log(typeof doSomething); 


此 处 代码 在 typeof doSomething 被 执行 时 中 断 了 ， 因 为 let 声明 尚未 被 执行 ， 
doSomething() 位 于 暂时 性 死 区 。 了 解 这 个 区 别 之 后 就 能 根据 是 否 想 要 提升 ， 来 选择 应 当 
使 用 块 级 函数 还 是 let 表达 式 。 


非 严 格 模式 的 块 级 函数 


ES6 在 非 严格 模式 下 同样 允许 使 用 块 级 加 数 ， 但 行为 有 细微 不 同 。 块 级 部 数 的 作用 域 会 被 提 
升 到 所 在 函数 或 全 局 环境 的 顶部 ， 而 不 是 代码 块 的 顶部 。 


// ES6 behavior 
if (true) { 


console.log(typeof doSomething) ; // “function" 


function doSomething() { 


WHE gem 
} 
doSomething(); 
} 
console.log(typeof doSomething) ; // Tune evony 


本 例 中 的 doSomething() 会 被 提升 到 全 局 作用 域 ， 因 此 在 if 代码 块 外 部 它 仍然 存在 。ES6 
标准 化 了 这 种 行为 ， 以 便 移 除 浏 览 器 此 前 存在 的 不 兼容 性 ， 于 是 在 所 有 ES6 运行 环境 中 其 行 
为 部 会 遵循 相同 的 方式 。 


允许 使 用 块 级 函数 只 是 增强 了 在 JS 中 声明 函数 的 能 力 ， 但 ES6 还 引入 了 一 种 全 新 的 函数 声 
明 方式 。 


箭头 函数 
ES6 最 有 趣 的 一 个 新 成 分 函数 〈 arrow function ) 。 箭 头 函 数 正 如 名 称 所 示 那 样 使 
用 一 个 “箭头 ”( => ) 但 它 的 行为 在 很 多 重要 方面 与 传统 的 JS RAA R : 


® 没有 this ` super ` arguments ， 也 没有 new. target 绑 定 : this ` super ` 
arguments ` 以 及 函数 内 部 的 new. target 的 值 由 外 层 最 近 的 非 箭 头 函 数 来 决定 ( 
super 详 见 第 四 章 ) 。 

© 不 能 使 用 new 去 调用 : at 
数 ， 使 用 new WA atk BS 

。 没有 原型 : 既然 不 能 
prototype 属性 。 

。 不 能 更 改 this : this 的 值 在 函数 内 部 不 能 被 修改 ， 在 函数 的 整个 生命 周期 内 其 值 会 
保持 不 变 。 

bd 没有 arguments 对 象 : 箭头 函数 没有 arguments 绑 定 ， 你 必须 依赖 于 具名 参数 或 剩余 
参数 来 访问 函数 的 参数 。 

。 不 允许 重复 的 具名 参数 : 箭头 函数 不 允许 拥有 重复 的 具名 参数 ， 无 论 是 否 在 严格 模式 
下 ; 而 相对 来 说 ， 传 统 函 数 只 有 在 严格 模式 下 才 禁 止 这 种 重复 。 


头 函 数 没 有 [[construct]] 方法 ， 因 此 不 能 被 用 为 构造 子 
数 会 抛 出 错误 。 


对 箭头 R BAL. A new ?’ 那么 它 也 不 需要 原型 2 也 就 是 没有 


产生 这 些 差 异 是 有 理由 的 。 首 先 并 且 最 重要 的 是 ， 在 JS 编程 中 this 绑 定 是 发 生 错误 的 常 
见 根源 之 一 ， 在 族 套 的 函数 中 有 时 会 因为 调用 方式 的 不 同 ， 而 导致 丢失 对 外 层 this 值 的 追 
踪 ， 就 可 能 会 导致 预期 外 的 程序 行为 。 其 次 ， 箭 头 函 数 使 用 单一 的 this 值 来 执行 代码 ， 使 
得 JS 引擎 可 以 更 容易 对 代码 的 操作 进行 优化 ; 而 常规 函数 可 能 会 作为 构造 函数 使 用 ， 导 致 
this 多 变 而 不 利 优 化 。 


其 余 差 异 也 聚集 在 减少 箭头 函数 内 部 的 错误 与 不 确定 性 ， 这 样 JS 引擎 也 能 更 好 地 优化 箭头 函 
数 的 运行 。 


注意 : 箭头 函数 也 拥有 name 属性 ， 并 且 遵 循 与 其 他 函数 相同 的 规则 。 


箭头 4 BS 法 


箭头 函数 的 语法 可 以 有 多 种 变 体 ， 取 决 于 你 要 完成 的 目标 。 所 有 变 体 都 以 函数 参数 为 开头 ， 
紧 跟着 的 是 箭头 ， 再 接 下 来 则 是 函数 体 。 参 数 与 函数 体 都 根据 实际 使 用 有 不 同 的 形式 。 例 
如 ， 以 下 箭头 函数 接收 单个 参数 并 直接 返回 它 : 


var reflect = value => value; 


var reflect = function(value) { 
return value; 


}; 


aK 
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当 箭 头 函 数 只 有 单个 参数 时 ， 该 参数 可 以 直接 书写 而 不 需要 额外 的 语法 ; 接 下 来 是 箭头 以 及 
右边 的 表达 式 ， 该 表达 式 会 被 计算 并 返回 结果 。 即 使 此 处 没有 明确 的 return HA’ KH 


如 果 需 要 传 入 多 于 一 个 的 参数 ， 就 需要 将 它们 放 在 括号 内 ， 就 像 这 样 : 


var sum = (numi, num2) => numi + num2; 


var sum = function(numi, num2) { 


return numi + num2; 


}; 


sum() 函数 简单 地 将 两 个 参数 相 加 并 返回 结果 。 此 箭头 函数 与 上 面 的 reflect() 之 问 唯一 区 


别 在 于 : 此 处 的 参数 被 封闭 在 括号 内 ， 相 互 之 间 使 用 过 号 分 隔 


> 就 像 传统 函数 那样 。 


如 果 函 数 没 有 任何 参数 ， 那 么 在 声明 时 就 必须 使 用 一 对 空 括号 ， 就 像 这 


var getName = () => "Nicholas"; 


// 基本 等 价 于 : 


var getName = function() { 
return "Nicholas"; 


}; 


回 值 ， reat 


含 多 个 语句 的 时 候 ， 需 要 将 函数 体 用 一 对 花 括 号 
个 版 本 的 sum() 


var sum = (num1，num2) => { 
return numi + num2; 


var sum = function(numi, num2) { 
return numi + num2; 
}; 
除了 arguments 对 象 不 可 用 之 外 ， 几 乎 可 将 花 括号 内 部 的 代码 当做 传统 函数 那样 对 待 。 


若 你 想 创建 一 个 空 函 数 ， 就 必须 使 用 空 的 花 括 号 ， 就 像 这 样 : 


var doNothing = () => {}; 
// RARE F : 
var doNothing = function() {}; 
花 括 号 被 用 于 表示 函数 的 主体 ， 它 在 你 至 今 看 到 的 例子 中 都 工作 正常 。 但 若 要 箭头 函数 向 外 
返回 一 个 对 象 字 面 量 ， 就 必须 将 该 字面 量 包 庄 在 圆 括号 内 ， 例 如 : 
var getTempItem = id => ({ id: id, name: "Temp" }); 
// EAST : 
var getTempItem = function(id) { 
return { 
id: id, 
name: "Temp" 


}; 
}; 


将 对 象 字面 量 包 庄 在 括号 内 ， 标 示 了 括号 内 是 一 个 字面 量 而 不 是 函数 体 。 


创建 立即 调用 函数 表达 式 


JS 中 使 用 函数 的 一 种 流行 方式 是 创建 立即 调用 函数 表达 式 〈 immediately-invoked function 
expression > IIFE ) ° IFE 允许 你 定义 一 个 匿名 函数 并 在 未 保存 引用 的 情况 下 立刻 调用 它 。 
当 你 想 创建 一 个 作用 域 并 与 程序 其 他 部 分 相隔 离 时 ， 这 种 模式 就 很 有 用 。 例 如 : 


let person = function(name) { 


return { 
getName: function() { 
return name; 


} 
F 


}("Nicholas"); 


console.log(person.getName()); // "Nicholas" 


此 代码 中 IIFE 被 用 于 创建 一 个 包含 getName() 方法 的 对 象 。 该 方法 使 用 name 参数 作为 返 
回 值 ， 实 际 上 让 name 成 为 所 返回 对 象 的 一 个 私有 成 员 。 


你 可 以 使 用 箭头 函数 来 完成 同样 的 事情 ， 只 要 将 其 包 襄 在 括号 内 即 可 : 


let person = ((name) => { 


return { 
getName: function() { 
return name; 


} 
}; 


}) ("Nicholas"); 


console.log(person.getName()); // "Nicholas" 


SREB RIESRART AK aia ÄRE ("Nicholas") 。 使 用 传统 函数 时 ， 括 
号 既 可 以 连 函 数 定义 与 参数 调用 一 起 包 衰 ， 也 可 以 只 用 于 包 庄 函数 定义 ， 箭 头 函 数 与 此 有 
别 o 


译注 : 使 用 传统 函数 时 ， (function(){/* 函 数 体 */})(); 与 (function(){/* 函 数 体 */}()); 
这 两 种 方式 都 是 可 行 的 。 


但 若 使 用 箭头 函数 ， 则 只 有 下 面 的 写法 是 有 效 的 : (O > {/* 函 数 体 */})(); 


HA this Rg 

e a E Ce N el eee 
据 调 用 该 函数 时 的 上 下 文 而 改变 ， 因 此 完全 违背 本 意 地 影响 了 预期 外 的 对 象 。 研 究 如 下 
例子 : 


var PageHandler = { 
id: "123456", 


init: function() { 
document.addEventListener("click", function(event) { 


Ey oo 


this.doSomething(event.type) ; // TTR 
} false); 
} 


doSomething: function(type) { 
console.log("Handling " + type + " for " + this.id); 


}; 


此 代码 的 pageHandler 对 象 被 设计 用 于 处 理 页 面 上 的 交互 。 调 用 inito 方法 以 建立 交互 ， 
并 注册 了 一 个 事件 处 理 函 数 来 调用 this.dosomething() 。 然 而 此 代码 并 未 按 预 期 工作 。 


此 处 的 this 是 对 事件 目标 对 象 (也 就 是 document ) 的 一 个 引用 ， 而 没有 绑 定 到 
PageHandler 上 ， 因 此 调用 this.dosomething() 会 被 中 断 。 若 试图 运行 此 代码 ， 你 将 会 在 事 
件 处 理 函 数 被 触发 时 得 到 一 个 错误 ， 因 为 ”document 对 象 并 不 存在 dosomething() 方法 。 


你 可 以 明确 使 用 bind() 方法 将 函数 的 this 值 绑 定 到 pageHandler 上 ， 以 修正 这 段 代 码 ， 
就 像 这 样 


var PageHandler = { 


id: "123456", 


init: function() { 
document .addEventListener("click", (function(event) { 
this.doSomething(event.type); // 没有 错误 
}).bind(this), false); 
}, 


doSomething: function(type) { 
console.log("Handling " + type + " for " + this.id); 
} 
}; 


现在 此 代码 能 像 预 期 那样 运行 ， 但 看 起 来 有 点 奇怪 。 通 过 调用 bind(this) ， 你 实际 上 创建 
了 一 个 新 函数 ， 它 的 this 被 绑 定 到 当前 this ， 也 就 是 PageHandler ° 为 了 避免 额外 创建 
一 个 函数 ， 修 正 此 代码 的 更 好 方式 是 使 用 箭头 芳 数 。 


箭头 函数 没有 this 比 定 ， 意 味 着 箭头 部 数 内 部 的 this 值 只 能 通过 查找 作用 域 链 来 确定 。 
to Rat KH ee Lee K BRA? BA this 值 就 会 与 该 函数 的 相等 ; 否则 ， 
this 值 就 会 是 全 局 对 象 (在 浏览 器 中 是 window ， 在 nodejs 中 是 global ) 。 你 可 以 使 用 


箭头 函数 来 书写 如 下 代码 : 


var PageHandler = { 
id: "123456", 


init: function() { 
document.addEventListener("click", 
event => this.doSomething(event.type), false); 


}, 


doSomething: function(type) { 
console.log("Handling " + type + " for " + this.id); 
} 
J; 


本 例 中 的 事件 处 理 函 数 是 一 个 调用 this.doSomething() 的 箭 箭头 函数 ， 它 的 this 值 与 
init() 方法 的 相同 ， 因 此 这 个 版 本 的 代码 的 工作 方式 与 使 用 了 bind(this) 的 上 个 例子 相 
似 。 尽 管 doSomething() 方法 并 不 返回 任何 值 ， 它 仍然 是 函数 体内 唯一 被 执行 的 语句 ， 因 此 
KARAT LRARE © 

箭头 函数 被 设计 为 “抛弃 型 "的 函数 ， 因 此 不 能 被 用 于 定义 新 的 类 型 ; prototype 属性 的 缺失 
让 这 个 特性 显而易见 。 对 箭头 函数 使 用 new 运算 符 会 导致 错误 ， 正 如 下 例 : 


var MyType = () => {}, 
object = new MyType(); // 错误 : 你 不 能 对 箭头 函数 使 用 'new' 


由 于 MyType() 是 一 个 箭头 函数 ， 它 就 不 存在 [[construct]] 方法 ， 此 代码 调用 new 
MyType() 的 操作 也 因此 失败 9 了 解 箭头 函数 不 能 被 用 于 new 的 特性 后 > JS 引擎 就 能 进一步 
对 其 进行 优化 。 


同样 ， 由 于 箭头 函数 的 this 值 由 包含 它 的 函数 决定 ， 因 此 不 能 使 用 call() 、 apply() 
或 bind() 方法 来 改变 其 this e 


箭头 函数 与 数组 


箭头 函数 的 简洁 语 mend 数组 操作 的 理想 选择 。 例 如 ， 若 你 想 使 用 自 定义 比较 器 
来 对 数组 进行 排序 ， 通 常会 这 么 写 : 


var result = values.sort(function(a, b) { 
return a - b; 


3); 


这 里 为 一 个 非常 简单 的 工序 使 用 了 过 多 代码 ， 可 以 比较 一 下 使 用 了 箭头 函数 的 更 简洁 版 本 : 


var result = values.sort((a, b) => a - b); 


bl 


能 使 用 回调 函数 的 数组 方法 ， 例 如 sort() 、 map() 与 reduce() 方法 ， 都 能 从 箭头 函数 的 
简洁 语法 中 获得 收益 ， 它 用 简单 的 代码 实现 看 似 复杂 的 需求 。 


没有 arguments 绑 定 


尽管 箭头 函数 没有 自己 的 arguments 对 象 ， 但 仍然 能 访问 包含 它 的 函数 的 arguments 对 
象 。 无 论 此 后 箭头 函数 在 何 处 执行 ， 该 对 象 都 是 可 用 的 。 例 如 


function createArrowFunctionReturningFirstArg() { 
return () => arguments[0]; 


var arrowFunction = createArrowFunctionReturningFirstArg(5); 


= 


console.log(arrowFunction()); ZS 


在 createArrowFunctionReturningFirstArg() 内 部 ， arguments[0] ARI Al ZH i K BAR 
arrowFunction 所 引用 ， 该 引用 包含 了 传递 给 createArrowFunctionReturningFirstArg() 函数 
的 首 个 参数 。 当 箭头 函数 在 此 后 被 执行 时 ， 它 返回 了 5 ， 正 是 传递 给 

createArrowFunctionReturningFirstArg() 的 首 个 参数 。 尽管 箭头 函数 arrowFunction 已 不 在 


创建 它 的 函数 的 作用 域内 ， 但 由 于 arguments 标识 符 的 作用 域 链 解 析 ， 当 时 的 arguments 
对 象 依然 可 被 访问 。 


识别 箭头 函数 


尽管 语法 不 同 ， 但 箭头 函数 依然 属于 函数 ， 并 能 被 照常 识别 。 研 究 如 下 代码 : 


N 


var comparator = (a, b) => a - b; 
console.log(typeof comparator); // "function" 


console.log(comparator instanceof Function); We 


console.log() 的 输出 揭示 了 typeof 与 instanceof 在 作用 于 箭头 函 数 时 的 行为 ， 与 作用 
在 其 他 函数 上 完全 一 致 。 


就 像 对 待 其 他 函数 那样 ， 你 仍然 可 以 对 箭头 函数 使 用 call() 、 apply() 与 bind() 方法 ， 
只 是 箭头 函数 的 this 绑 定 并 不 会 受 影响 。 这 里 有 几 个 例子 : 


var sum = (num1，num2) => numi + num2; 


console.log(sum.call(null, 1, 2)); // 
console.log(sum.apply(null, [1, 2])); Ha 


oO Ww 


var boundSum = sum.bind(null, 1, 2); 


console.1log(boundSum()); i E 


sum() 函数 被 使 用 calo 与 apply() 方法 调用 并 传 入 了 参数 。 bindo 方法 被 用 于 创建 
boundSum( ) ， 后 者 的 两 个 参数 已 被 绑 定 为 m5 E> 因此 调用 时 不 再 需要 传 入 这 两 个 参 
数 。 


at 


头 函 效能 在 任意 位 置 ， 包 括 使 用 回调 函数 时 ， 替 代 你 当前 使 用 的 匿名 函数 。 下 一 节 介 绍 的 


ES6 的 另 一 项 主要 改进 ， 不 过 该 内 容 完全 是 内 部 实现 ， 并 没有 使 用 新 语法 。 
尾 调用 优化 
在 ES6 中 对 函数 最 有 趣 的 改动 或 许 就 是 一 项 引擎 优化 ， 它 改变 了 尾部 调用 的 系统 。 尾 调用 ( 


tail call ) 指 的 是 调用 遂 数 的 语句 是 另 一 个 函数 的 最 后 语句 ， 就 像 这 样 : 


function doSomething() { 
return doSomethingElse(); // RAA 


} 


在 ES5 引擎 中 实现 的 尾 调用 ， 其 处 理 与 其 他 函数 调用 一 致 : 一 个 新 的 栈 帧 ( stack frame ) 
被 创建 并 推 到 调用 栈 之 上 ， 用 于 表示 该 次 函数 调用 。 这 意味 着 之 前 每 个 栈 帧 都 被 保留 在 内 存 
中 ， 当 调用 栈 过 大 时 会 出 问题 。 


有 何不 同 ? 


ES6 在 严格 模式 下 力图 为 特定 尾 调用 减少 调用 栈 的 大 小 ， 非 严格 模式 的 尾 调用 则 保持 不 变 。 
当 满足 以 下 条 件 时 ， 尾 调用 优化 不 会 创建 新 的 栈 帧 ， 而 是 清除 当前 栈 帧 并 再 次 利用 它 : 
1， 尾 调用 不 能 引用 当前 栈 慎 中 的 变量 (意味 着 该 函数 不 能 是 闭 包 ) 

2， 进 行 尾 调用 的 函数 在 尾 调用 返回 结果 后 不 能 做 额外 操作 ; 

3. 尾 调 用 的 结果 作为 当前 函数 的 返回 值 。 


作为 一 个 例子 ， 下 面 代 码 满足 了 全 部 三 个 条 件 ， 因 此 能 被 轻 多 地 优化 : 


"use strict"; 
function doSomething() { 


// 被 优化 
return doSomethingElse(); 


该 函数 对 doSomethingElse() 进行 了 一 次 尾 调 用 ， 并 立即 返回 了 其 结果 ， 同 时 并 未 访问 局 部 
作用 域 的 任何 变量 。 但 若 做 个 小 小 改动 ， 不 返回 结果 ， 就 会 产生 一 个 无 法 被 优化 的 函数 : 
"use strict"; 
function doSomething() { 


// 未 被 优化 : 缺少 return 
doSomethingElse(); 


KMI > to RAR AY BB He ZA RE RZ IG EAT T PARE MAG RAA E ERARA : 


"use strict"; 


function doSomething() { 
// 未 被 优化 : 在 返回 之 后 还 要 执行 加 法 


return 1 + doSomethingElse(); 


此 例 在 doSomethingElse() 的 结果 上 对 其 进行 了 加 1 操作 ， 而 没有 直接 返回 该 结果 ， 这 足以 
关闭 优化 。 
无 意 中 关 闭 优 化 的 另 一 个 常见 方式 ， 是 将 函数 调用 的 结果 储存 在 一 个 变量 上 ， 之 后 才 返 回 了 
结果 ， 就 像 这 样 : 
"use strict"; 
function doSomething() { 
// 未 被 优化 ; 调用 并 不 在 尾部 


var result = doSomethingElse(); 
return result; 


本 例 之 所 以 不 能 被 优化 ， 是 因为 dosomethingElse() 的 值 并 没有 立即 被 返回 。 


使 用 闭 包 或 许 就 是 需要 避免 的 最 困难 情况 ， 因 为 闭 包 能 够 访问 外 层 作 用 域 的 变量 ， 会 导致 尾 
调用 优化 被 关闭 。 例 如 : 


"use strict"; 
function doSomething() { 
var num = i, 


func = () => num; 


// 未 被 优化 : 此 函数 是 闭 包 
return func(); 


此 例 中 闭 包 func() 需要 访问 局 部 变量 num ， 虽 然 调用 fuco 后 立即 返回 了 其 结果 ， 但 
是 对 于 num 的 引用 导致 优化 不 会 发 生 。 
如 何 控制 尾 调 用 优化 


在 实践 中 ， 尾 调用 优化 由 引擎 进行 ， 除 非 要 尽力 去 优化 一 个 函数 ， 否 则 不 必 对 此 考虑 太 多 。 
尾 调 用 优化 的 主要 用 例 是 在 递归 函数 中 ， 而 且 此 时 的 优化 能 达到 最 大 效果 。 考 虑 以 下 计算 阶 
乘 的 函数 : 


function factorial(n) { 


wos de 4 


return 1; 
} else { 
// 未 被 优化 : 在 返回 之 后 还 要 执行 乘法 


return n * factorial(n - 1); 


此 版 本 的 函数 并 不 会 被 优化 ， 因 为 在 递归 调用 factorial) 之 后 还 要 执行 乘法 运算 。 如 果 
n 是 一 个 大 数字 ， 那 么 调用 栈 的 大 小 会 持续 增长 ， 并 且 可 能 导致 堆栈 溢出 。 


为 了 优化 此 函数 ， 你 需要 确保 在 最 后 的 函数 调用 之 后 不 会 发 生 乘 法 运算 。 为 此 可 以 使 用 一 个 
默认 参数 来 将 乘法 操作 移出 return 语句 。 有 结果 的 函数 携带 着 临时 结果 进入 下 一 次 迭代 ， 
这 样 创建 的 函数 的 功能 与 前 例 相 同 ， 但 它 能 被 ES6 的 引擎 所 优化 。 此 处 是 新 的 代码 : 


function factorial(n, p = 1) { 


if (n <= 1) { 
return 1 * p; 
} else { 
let result = n * p; 


// 被 优化 
return factorial(n - 1, result); 


在 重 写 的 factorial() 函数 中 ， 添 加 了 默认 值 为 1 的 第 二 个 参数 p ° p 参数 保存 着 前 一 
次 乘法 的 结果 ， 因 此 下 一 次 的 结果 就 能 在 进行 函数 调用 之 前 被 算出 。 当 n 大 于 1 时 ， 会 先 
进行 乘法 运算 并 将 其 结果 作为 第 二 个 参数 传 入 factorial() ° 这 就 允许 ES6 引 擎 去 优化 这 个 
递归 调用 。 


尾 调用 优化 是 你 在 书写 任意 递归 函数 时 都 需要 考虑 的 因素 ， 因 为 它 能 提供 显著 的 性 能 提升 ， 
尤其 是 被 应 用 到 计算 复杂 度 很 高 的 函数 时 。 


cx 


总 结 


BRE ES6 中 并 未 经 历 巨 大 变化 ， 然 而 一 系列 增 量 改 进 使 得 函数 更 易 使 用 。 


在 特定 参数 未 被 传 入 时 ， 函 数 的 默认 参数 允许 你 更 容易 指定 需要 使 用 的 值 。 而 在 ES6 之 前 ， 
为 了 检查 参数 是 已 否 已 提供 ， 并 在 未 提供 时 为 其 分 配 一 个 预 设 值 ， 需 要 在 函数 内 书写 一 些 额 
外 代码 。 


剩余 参数 允许 你 将 余下 的 所 有 参数 放 入 指定 数组 。 使 用 申 正 的 数组 ， 并 可 以 根据 需要 指定 包 
含 哪些 参数 ， 让 剩余 参数 成 为 比 arguments 更 为 灵活 的 解决 方案 。 


扩展 运算 符 是 剩余 参数 的 好 伙伴 ， 允 许 在 调用 函数 时 将 数组 解构 为 分 离 的 参数 。 在 ES6 之 
前 ， 要 将 数组 的 元 素 用 作 独 立 参 数 传 给 函数 只 有 两 种 办 法 : 手动 指定 每 一 个 参数 ， 或 者 使 用 
apply() 方法 。 有 了 扩展 运算 符 ， 你 就 能 轻易 将 数组 传递 给 函数 而 无 须 顾虑 该 济 数 的 this 
绑 定 。 

新 增 的 name 属性 让 你 在 调试 与 执行 方面 能 更 容 多 地 识别 函数 。 此 外 ，ES6 正式 定义 了 块 级 
函数 的 行为 ， 因 此 在 严格 模式 下 它们 不 再 是 语法 错误 。 

在 ES6 F > HAMAR [[call]] 与 [[construct]] 方法 所 定义 ， 前 者 对 应 普通 的 函数 执 
行 ， 后 者 则 对 应 着 使 用 了 new 的 调用 。 new.target 元 属性 也 能 用 于 判断 函数 被 调用 时 是 否 
使 用 了 new 。 


ES6 函数 的 最 大 变化 就 是 增加 了 箭头 函数 。 箭 头 函 数 被 设计 用 于 替代 匿名 函数 表达 式 ， 它 拥 
有 更 简洁 的 语法 > 词法 级 的 this BB $ 并 且 没 有 arguments a 名 此 外 ? 箭头 函数 不 能 if 
改 它 们 的 this 绑 定 ， 因 此 不 能 被 用 作 构造 器 。 


函数 的 调用 被 优化 ， 以 保持 更 小 的 调用 栈 、 使 用 更 少 的 内 存 ， 并 防止 堆 


尾 调用 优化 允许 某 些 函 
行 安全 优化 时 ， 它 会 由 引擎 自动 应 用 。 不 过 你 可 以 考虑 重 写 递归 函数 ， 以 便 


栈 溢 出 。 当 能 进 # 
利用 这 种 优化 。 


第 四 草 扩展 的 对 象 功 能 


ES6 注重 于 提高 对 象 的 效用 ， 这 是 因为 在 JS 中 几乎 所 有 的 值 都 是 某 种 类 型 的 对 象 。 此 外 ， 随 
着 JS 应 用 复杂 度 的 增长 ， 在 JS 程序 中 所 使 用 的 对 象 的 平均 数 也 在 持续 增长 ， 因 此 更 有 效 使 
用 对 象 就 变 得 更 加 必要 。 


ES6 在 对 象 的 许多 方面 都 进行 了 改进 ， 从 简单 的 语法 扩展 ， 到 操作 与 交互 。 
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e Gc 


对 象 类 别 


相对 于 那些 由 浏览 器 或 Node.js 之 类 运行 环境 所 添加 的 对 象 ，JS 使 用 混合 术语 来 描述 在 标准 
中 的 对 象 ， ES6 规范 明确 定义 了 对 象 的 每 种 类 别 。 理 解 对 象 术语 对 于 从 整体 上 清楚 认识 这 门 
语言 来 说 非常 重要 。 对 象 类 别 包 括 : 


e 普通 对 象 : 拥有 JS 对 象 所 有 默认 的 内 部 行为 。 

e 奇异 对 象 : 其 内 部 行为 在 某 些 方 面 有 别 于 默认 行为 。 

o 标准 对 象 : 在 ES6 中 被 定义 的 对 象 ， 例 如 array 、 pate ， 等 等 。 标 准 对 象 可 以 是 普 
通 的 ， 也 可 以 是 奇异 的 。 

。 内 置 对 象 : 脚本 在 JS 运行 环境 中 开始 运行 时 可 用 的 对 象 。 所 有 的 标准 对 象 都 是 内 置 对 
$ o 


我 会 在 整 本 书 中 使 用 这 些 术 语 来 讲解 在 ES6 中 定义 的 各 种 对 象 。 


对 象 字面 量 语法 的 扩展 


对 象 字 面 量 是 JS 中 最 流行 的 模式 之 一 ， 它 存在 于 互联 网 上 的 几乎 所 有 JS 文件 中 ，JSON 就 
是 基于 这 种 语法 。 对 象 字 面 量 如 此 流行 ， 是 因为 它 能 用 简洁 语法 创建 对 象 ， 避 免 了 书写 宛 余 
代码 。 对 开发 者 来 说 幸运 的 是 ， ES6 用 几 种 方式 扩展 了 对 象 字 面 量 ， 让 这 种 语法 变 得 更 强大 
也 更 简洁 。 


属性 初始 化 器 的 速记 法 


在 ESS 及 更 早 版 本 中 ， 对 象 字面 量 是 简单 的 “ 键 / 值 对 ”集合 。 这 意味 着 初始 化 属性 值 的 代码 可 
能 会 有 些 重复 ， 例 如 : 


function createPerson(name, age) { 
return { 
name: name, 
age: age 


createPerson() 函数 创建 了 一 个 对 象 ， 其 属性 名 与 函数 的 参数 名 相同 。 这 看 起 来 重复 了 
name 与 age ， 尽管 左 侧 是 对 象 属性 的 名 称 ， 而 右 侧 则 负责 给 属性 提供 值 。 返 回 对 象 的 
name 键 与 age 键 分 别 被 变量 name 与 age 变量 所 赋值 。 


在 ES6 中 ， 你 可 以 使 用 属性 初始 化 器 的 速记 法 来 消除 对 象 名 称 与 本 地 变量 名 的 重复 情况 。 当 
对 象 的 一 个 属性 名 称 与 本 地 变量 名 相同 时 ， 可 以 简单 书写 名 称 而 省 略 冒 号 与 值 。 例 如 ， 
createPerson() 能 用 ES6 这 样 重 写 : 


function createPerson(name, age) { 


return { 
name, 
age 
}; 


当 对 象 字 面 量 中 的 属性 只 有 名 称 时 ，JS 引擎 会 在 周边 作用 域 查找 同名 变量 。 若 找到 ， 该 变量 
的 值 将 会 被 赋 给 对 象 字 面 量 的 同名 属性 。 在 本 例 中 ， 局 部 变量 name 的 值 就 被 赋 给 了 name 
属性 。 

这 个 扩展 让 对 象 字 面 量 的 初始 化 更 加 简洁 ， 也 有 助 于 消除 命名 错误 。 用 局 部 变量 为 对 象 同 名 
属性 赋值 在 JS 中 是 极其 常见 的 模式 ， 因 此 这 个 扩展 自然 非常 受 欢迎 。 


方法 简写 


ES6 同样 改进 了 为 对 象 字面 量 方法 赋值 的 语法 。 在 ES5 及 更 早 版 本 中 ， 你 必须 指定 一 个 名 称 
并 用 完整 的 函数 定义 来 为 对 象 添 加 方法 ， 如 下 : 


var person = { 
name: "Nicholas", 
sayName: function() { 
console.log(this.name); 


} 
J; 
通过 省 略 冒 号 与 function 关键 字 ，ES6 将 这 个 语法 变 得 更 简洁 ， 这 意味 着 你 可 以 这 样 重 写 
上 个 例子 : 


var person = { 
name: "Nicholas", 
sayName() { 
console.log(this.name); 
} 
}; 


这 种 速记 语法 也 被 称 为 方法 简写 语法 ( concise method syntax ) ， 与 上 例 一 样 在 person 
对 得 中 创建 了 一 个 方法 。 sayName() 属性 被 一 个 匿名 函数 所 赋值 ， 并 且 具 备 ESS 版 本 的 
sayName() 方法 的 所 有 特征 。 但 有 一 点 区 别 是 : 方法 简写 能 使 用 super ， 而 非 简写 的 方法 则 
不 能 ( super 会 在 后 面 的 小 节 中 讨论 ) 。 

使 用 方法 简写 速记 法 创建 的 方法 ， 其 name 属性 就 是 括号 之 前 的 名 称 。 上 面 这 个 例子 

中 ” person.sayName() 的 名 称 属性 就 是 "sayName" 


可 计算 属性 名 

在 ES5 及 更 早 版 本 中 ， 对 象 实例 能 使 用 “可 计算 的 属性 名 "， 只 要 用 方 括号 表示 法 来 代替 小 数 
点 表示 法 即 可 。 方 括号 允许 你 指定 变量 或 字符 串 字面 量 为 属性 名 ， 并 且 在 字符 串 中 允许 存在 
不 能 用 于 标识 符 的 特殊 字符 。 此 处 有 个 范例 : 


var person = {}, 


lastName = "last name"; 
person["first name"] = "Nicholas"; 
person[lastName] = "Zakas"; 
console.log(person["first name"]); // "Nicholas" 
console.log(person[lastName] ); // "Zakas" 


lastName 变量 的 值 为 "last name" ? 这 样 该 例 中 两 个 属性 名 都 包 包 空格 ， 这 这 种 情况 是 无 
法 使 用 小 数 点 表示 法 的 ， 而 方 括号 表示 法 允许 将 任意 字符 串 用 作 属 性 最 终 "first name" 
与 "last name" 属性 分 小 别 被 赋值 为 "Nicholas" 与 "Zakas" ° 


此 外 ， 你 可 以 在 对 象 字 面 量 中 直接 使 用 字符 串 字 面 量 作为 属性 ， 就 像 这 样 : 


var person = { 
"first name": "Nicholas" 


J; 
console.log(person["first name"]); // "Nicholas" 
这 种 模式 要 求 属性 名 事先 已 知 、 并 且 能 用 字符 串 字 面 量 表示 。 然 而 ， 若 属性 名 被 包含 在 变量 


中 (就 像 前 面 例子 中 的 "first name" ) ， 或 者 必须 通过 计算 才能 获得 ， 那 么 在 ES5 中 就 无 
法 为 对 象 字面 量 定 义 这 种 属性 。 


在 ES6 中 ， 可 计算 属性 名 是 对 象 字面 量 语法 的 一 部 分 ， 它 用 的 也 是 方 括号 表示 法 ， 与 此 前 在 
对 象 实例 上 的 用 法 一 致 。 例 如 : 


var lastName = "last name"; 


var person = { 


"first name": "Nicholas", 

[lastName]: "Zakas" 
}; 
console.log(person["first name"]); // "Nicholas" 
console.log(person[lastName] ); // "Zakas" 


对 象 字面 量 内 的 方 括号 表明 该 属性 名 需要 计算 ， 其 结果 是 一 个 字符 串 。 这 意味 着 其 中 可 以 包 
含 表达 式 ， 像 下 面 这 样 : 


var suffix = " name"; 
var person = { 


[hast suid: Nicholasa, 
["last" + suffix]: "Zakas" 


}; 
console.log(person["first name"]); // "Nicholas" 
console.log(person["last name"]); // "Zakas" 


这 些 属性 名 被 计算 为 "First name" 与 "last name" ， 而 这 两 个 字符 串 此 后 可 以 用 来 引用 对 
应 属性 。 使 用 了 方 括号 表示 法 ， 任 何 能 放 在 对 象 实例 方 括号 内 的 东西 ， 都 可 以 作为 可 计算 属 
性 名 用 在 对 象 字 面 量 中 。 


新 的 方法 


从 ES5 开始 就 有 这 么 一 个 设计 意图 : 避免 创建 新 的 全 局 函数 ， 避 免 在 object 对 象 的 原型 上 
添加 新 方法 ， 而 尽量 尝试 将 新 方法 添加 到 合适 对 象 上 。 不 过 ， 当 新 方法 不 适用 于 其 他 任何 对 
象 时 ， 全 局 的 object 对 象 就 会 收 到 越 来 越 多 的 方法 ES6 也 在 object 对 象 上 引入 了 两 个 
新 方法 ， 以 便 让 特定 任务 更 易 完成 。 


Object.is() 方法 


在 JS 中 当 要 比较 两 个 值 时 ， 你 可 能 会 使 用 相等 运算 符 =) 或 严格 相等 运算 符 ( -==- 
) 。 为 了 避免 在 比较 时 发 生 强 制 类 型 转换 ， 许 多 开发 者 更 倾向 于 使 用 后 者 。 但 严格 相等 运算 
符 也 并 不 完全 准确 ， 例 如 ， 它 认为 +0 与 -9 相等 ， 尽 管 这 两 者 在 JS 引擎 中 有 不 同 的 表 
示 ; 另外 NaN === NaN 会 返回 false ， 因 此 只 有 用 isan) 元 数 才 能 正确 检测 Nan e 


ES6 引入 了 object.is() 方法 来 弥补 严格 相等 运算 符 残 留 的 怪异 缺陷 。 此 方法 接受 两 个 参 
数 ， 并 会 在 二 者 类 型 相同 并 且 值 也 相等 相等 时 返回 true 。 此 处 有 个 例子 : 


console.log(+0 == -0); // true 
console.log(+0 === -0); // true 
console.log(Object.is(+0, -0)); // false 
console.log(NaN == NaN); // false 
console.log(NaN === NaN); // false 


console.log(Object.is(NaN, NaN)); // true 


console.log(5 == 5); // true 

console.log(5 == "5"); // true 

console.log(5 === 5); // true 

console.log(5 === "5"); // false 

console.log(Object.is(5, 5)); Hf ue 

console.log(Object.is(5, "5")); // false 
绝 大 多 数 情况 下 ， object.is() 的 结果 与 === 运算 符 是 相同 的 ， 仅 有 的 例外 是 : 它 会 认为 
+0 与 -0 不 相等 ， 而 且 NaN 等 于 Nan 。 但 没 必 要 停止 使 用 严格 相等 运算 符 ， 选 择 
Object.is() 还 是 选择 == 或 == ， 取 决 于 代码 的 实际 需求 。 


Object.assign() 方法 


混入 ( Mixin ) 是 在 JS 中 组 合 对 象 时 最 流行 的 模式 。 在 一 次 混入 中 ， 一 个 对 象 会 从 另 一 个 对 
象 中 接收 属性 与 方法 。 很 多 JS 的 库 中 都 有 类 似 下 面 这 样 的 混入 方法 : 


function mixin(receiver, supplier) { 
Object.keys(supplier).forEach(function(key) { 
receiver[key] = supplier[key]; 


J); 


return receiver; 


mixin() ÑE supplier 对 象 的 自 有 属性 上 进行 和 迭代， 并 将 这 些 属 性 复制 到 receiver 对 
象 〈 浅 复制 ， 当 属性 值 为 对 象 时 ， 仅 复制 其 引用 ) 。 这 样 receiver 对 象 就 能 获得 新 的 属性 
而 无 须 使 用 继承 ， 正 如 下 面 代码 : 


function Eventharger() 7+ 22. y 

EventTarget.prototype = { 
constructor: EventTarget, 
emit: function() { /*...*/ }, 
ony FUNCELOMO 7-22.77 

J; 


var myObject = {}; 
mixin(myObject, EventTarget.prototype); 


myObject.emit("somethingChanged"); 


此 处 myobject 对 象 接收 了 EventTarget.prototype 对 象 的 行为 ， 获 得 了 使 用 emit() AK 
来 发 布 事件 、 使 用 on() 来 订阅 事件 的 能 力 。 


此 模式 非常 流行 ， 于 是 ES6 也 添加 了 object.assign() 方法 来 完成 同样 的 行为 。 该 方法 接受 
一 个 接收 者 对 象 ， 以 及 任意 数量 的 源 对 象 ， 并 会 返回 接收 者 对 象 。 由 于 像 前 面 这 样 的 

mixin() 函数 使 用 了 赋值 运算 符 ( = ) ， 也 就 无 法 将 访问 器 属性 复制 到 接收 者 上 ， 而 
assign() 更 能 反映 出 实际 发 生 的 操作 ， 因 此 mixin) 这 个 名 称 被 弃 用 了 ° 


各 式 各 样 的 库 中 都 有 相似 但 名 称 不 同 的 方法 ， 流 行 的 有 extend() 或 mix() ， 其 基本 功 
能 都 相同 。 而 ES6 草案 除了 object.assign() 之 外 ， 也 曾 短暂 存在 一 个 

Object.mixin() 方法 ， 二 者 的 主要 差异 在 于 object.mixin() 也 会 复制 访问 器 属性 。 但 
考虑 到 super 的 使 用 ， 此 方法 最 终 被 移 除 了 ( 本章 后 面 小 节 会 介绍 super ) ° 


你 可 以 在 任意 曾 使 用 mixin() 函数 的 地 方 使 用 object.assign() ， 此 处 有 个 例子 : 


fünction Eventtrarget (人 大 27 

EventTarget.prototype = { 
constructor: EventTarget, 
emit: function() { /*...*/ }, 
on: function()) A + 


var myObject = {} 
Object.assign(myObject, EventTarget.prototype); 


myObject.emit("somethingChanged"); 


Object.assign() 方法 接受 任意 数量 的 源 对 象 ， 而 接收 对 象 会 按照 源 对 象 在 参数 中 的 顺序 来 依 
次 接收 它们 的 属性 。 这 意味 着 在 接收 对 象 中 ， 后 面 源 对 象 的 属性 可 能 会 履 盖 前 面 的 ， 下 面 代 
码 片 段 中 就 有 这 种 情况 : 

var receiver = {}; 


Object.assign(receiver, 


{ 
S mie 
name: "file.js" 
} 
{ 
type: "css" 
} 
); 
console.log(receiver .type); VGS S 
console.log(receiver.name); He Waals FS 


receiver.type 的 值 为 "css" ， 这 是 因为 第 二 个 源 对 象 禾 盖 了 第 一 个 源 对 象 的 值 。 


object.assign() 方法 并 不 是 ES6 的 一 项 重大 扩展 ， 但 它 确实 把 很 多 JS 库 中 存在 的 一 个 公 
共 方 法 标准 化 了 。 


= Z Ic B Ah a4 Z th Ze 
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操作 访问 器 属性 


切记 Object.assign() 不 能 将 源 对 象 的 访问 器 属性 复制 到 接收 对 象 中 ， 由 于 它 使 用 了 赋 
值 运算 符 ， 源 对 象 的 访问 器 属性 就 会 转变 成 接收 对 象 的 数据 属性 ， 例 如 : 


var receiver = {}, 
Supplier = { 
get name() { 
GCURN legs 
} 
3; 


Object.assign(receiver, supplier); 
var descriptor = Object.getOwnPropertyDescriptor(receiver, "name"); 


console.log(descriptor.value); // “file.js" 
console.log(descriptor.get); // undefined 


此 代码 中 的 supplier 对 但 拥有 一 个 名 为 name 的 访问 器 属性 。 在 使 用 
Object.assign() 方法 时 ， supplier .name 返回 的 值 是 es ， 于 是 该 值 就 被 存储 
到 receiver.name 数据 属性 上 。 


SRNR OER 
ES5 严格 模式 为 重复 的 对 象 字面 量 属性 引入 了 一 个 检查 ， 存 在 重复 的 属性 名 时 会 抛 出 错误 。 
例如 ， 以 下 代码 就 有 问题 : 
"use strict"; 
var person = { 
name: "Nicholas", 


name: "Greg" // 在 ESS 严格 模式 中 是 语法 错误 
J; 


在 ES5 严格 模式 下 运行 时 ， 第 二 个 name 属性 会 造成 语法 错误 。 但 ES6 移 除 了 重复 属性 的 
检查 ， 无 论 是 否 严格 模式 ， 都 不 再 进行 检查 。 当 存在 重复 属性 时 ， 排 在 后 面 的 属性 的 值 会 成 


为 该 属性 的 实际 值 ， 如 下 所 示 : 
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"use strict"; 
var person = { 
name: "Nicholas", 
name: "Greg" // 在 ES6 严格 模式 中 不 会 出 错 


}; 


console.log(person.name); // "Greg" 
在 本 例 中 ， person.name 的 值 为 "Greg" ? 因为 这 是 赋 给 该 属性 的 最 后 一 个 值 。 


自 有 属性 的 枚 举 顺序 


ESS 并 没有 定义 对 象 属性 的 枚 举 顺序 ， 而 是 将 该 问题 留 给 了 JS 引擎 厂商 。 ES6 则 严格 定义 
了 对 象 自 有 属性 在 被 枚 举 时 的 返回 顺序 。 这 影响 了 object.getownPropertyNames() 与 
Reflect.ownkeys 【〈 详 见 第 十 二 章 ) 返回 属性 的 方式 ， 也 同样 影响 了 object.assign() 处 理 
属性 的 顺序 。 


自 有 属性 枚 举 时 基本 顺序 如 下 : 


.所 有 的 数字 类 型 键 ， 按 升序 排列 。 
2. 所 有 的 字符 串 类 型 键 ， ' 按 被 添加 到 对 象 的 顺序 排列 
3. 所 有 的 符号 类 型 〈 详 见 第 六 章 ) 键 ， 也 按 添加 顺序 排列 。 
此 处 有 个 示例 : 
var obj = { 
anai 
Ql 
GE a; 
2 
Deal 
akg al 
}; 
obj.d = 1; 
console.log(Object.getOwnPropertyNames(obj).join("")); // "912acbd" 


Object.getOwnPropertyNames() AHO >œ 1% 2 > a>co b> d 的 顺序 返 
回 了 obj 对 象 的 属性 。 注 意 ， 数 值 类 型 的 键 不 会 遵循 在 对 象 字 面 量 中 的 顺序 ， 而 会 被 合并 及 
排序 。 字 符 串 类 型 的 键 会 跟 在 数值 类 型 的 键 之 后 ， 按 照 被 添加 到 obj 对 象 的 顺序 ， 在 对 象 字 
面 量 中 定义 的 键 会 首先 出 现 ， 接 下 来 是 此 后 动态 添加 到 对 象 的 键 。 


对 于 for-in 循环 ， 并 非 所 有 的 JS 引擎 都 采用 相同 的 处 理 方式 ， 其 枚 举 顺 序 仍 未 被 明 


确 规定 。 而 Object.keys() 和 JSON.stringify() 也 使 用 了 与 for-in 一 样 的 枚 举 顺 


虽然 枚 举 顺序 的 变动 对 JS 的 工作 方式 影响 其 小， 但 依赖 于 特定 枚 举 顺序 才能 正确 运行 的 程序 
并 不 罕见 ES6 通过 规定 枚 举 的 顺序 ， 就 确保 了 依赖 枚 举 操作 的 JS 代码 无 论 在 什么 运行 环 
境 中 都 能 正常 工作 。 


更 强大 的 原型 


原型 是 在 JS 中 进行 继承 的 基础 ， ES6 则 继续 强化 原型 。 早 期 的 JS 版 本 对 原型 的 使 用 有 严重 
限制 ， 然 而 随 着 语言 的 成 熟 ， 开 发 者 也 越 来 越 熟悉 原型 的 工作 机 制 ， 因 此 他 们 明确 希望 能 对 
原型 有 更 多 控制 权 、 并 能 更 方便 地 使 用 它 。 于 是 ES6 就 给 原型 引入 了 一 些 改进 。 


修改 对 象 的 原型 


一 般 来 说 ， 对 象 的 原型 会 在 通过 构造 器 或 Object.create() 方法 创建 对 象 时 被 指定 。 JS 编程 
到 ES5 为 止 最 重要 的 假定 之 一 就 是 : 对 象 的 原型 在 初始 化 完成 后 会 保持 不 变 。 ESS 添加 了 
Object.getPrototypeof() 方法 来 获取 任意 指定 对 象 的 原型 ， 不 过 仍然 缺少 在 初始 化 之 后 更 改 
对 象 原 型 的 标准 方法 。 


ES6 通过 添加 object.setPrototypeof() 方法 而 改变 了 这 种 假定 。 此 方法 允许 你 修改 任意 指 
定 对 象 的 原型 ， 它 接受 两 个 参数 : 需要 被 修改 原型 的 对 象 ， 以 及 将 会 成 为 前 者 原型 的 对 象 。 
例如 : 


let person = { 
getGreeting() { 
return “Hello”; 


} 
}; 
let dog = { 
getGreeting() { 
return "Woof"; 
} 
}; 


// 原型 为 person 
let friend = Object.create(person); 


console.log(friend.getGreeting()); // “Hello" 
console.log(Object.getPrototypeOf(friend) === person); // true 
// 将 原型 设置 为 dog 

Object.setPrototypeOf(friend, dog); 
console.log(friend.getGreeting()); // "Woof" 


console.log(Object.getPrototypeOf(friend) === dog); /te 


此 代码 定义 了 两 个 基础 对 象 : person 与 dog ， 二 者 都 拥有 一 个 名 为 getGreeting() 的 方 
法 ， 用 于 返回 一 个 字符 串 。 friend 对 象 起 初 继承 了 person 对 象 ， 意 味 着 
friend.getGreeting() 方法 会 输出 "Hello" ; 当 它 的 原型 被 更 改 为 dog 对 象 ， 与 person 
的 关联 就 被 破坏 ， friend.getGreeting() 方法 会 改 而 输出 "woot" 。 


对 象 原型 的 实际 值 被 存储 在 一 个 内 部 属性 [[Prototype] ] E» Object ,getPrototypeof() 方 
法 会 返回 此 属 ' 性 存储 的 值 ， 而 Object.setPrototypeof() 方法 则 能 够 修改 该 值 。 不过， 使 用 
[[Prototype]] 属性 的 方式 还 不 止 这 些 。 


使 用 Super 引用 的 简单 原型 访问 


正如 前 面 所 提 到 的 ， 原 型 对 JS 来 说 非常 重要 ， 而 ES6 也 进行 了 很 多 工作 来 让 它 更 易 用 。 关 

于 原型 的 另 一 项 进步 就 是 引入 了 super 引用 ， 这 样 就 有 BB 轻易 地 在 对 象 原型 上 进行 功能 调 
用 。 例 如 ， 若 要 履 盖 对 象 实例 的 一 个 方法 ， 但 依然 想 调 用 原型 上 的 同名 方法 ， 你 可 能 会 这 么 
做 : 


let person = { 
getGreeting() { 
return "Hello"; 


} 
}; 
let dog = { 
getGreeting() { 
return "Woof"; 
} 
}; 


let friend = { 
getGreeting() { 
return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!"; 


}; 


// 将 原型 设置 为 person 
Object.setPrototypeOf(friend, person); 


console.log(friend.getGreeting()); Lede OEG nasi, 
console.log(Object.getPrototypeOf(friend) === person); // true 

// 将 原型 设置 为 dog 

Object.setPrototypeOf(friend, dog); 

console.log(friend.getGreeting()); Wool 
console.log(Object.getPrototypeOf(friend) === dog); /7 tue 


本 例 中 friend 上 的 getGreeting() 调用 了 对 象 上 的 同名 方法 。 Object .getPrototypeof() 
方法 确保 了 能 调用 正确 的 原型 ， 并 在 其 返回 结果 上 附加 了 一 个 字符 串 ; 之 后 的 call(this) 
则 能 确保 正确 设置 原型 方法 内 部 的 this 值 。 


调用 原型 上 的 方法 时 ， 要 牢记 使 用 object.getprototypeof() 与 .call(this) ， 实 在 有 点 复 
杂 ， 因 此 ES6 才 引入 了 super 。 简 单 来 说 ， super 是 指向 当前 对 象 的 原型 a ， 实 
际 上 就 是 Object ,getPrototypeof(this) 的 值 。 了 解 这 文 些 后 ， 你 就 可 以 像 下 面 这 样 简化 
getGreeting() 方法 : 


let friend = { 
getGreeting() { 
// 这 相当 于 上 个 例子 中 的 : 
// Object.getPrototypeOf(this).getGreeting.call(this) 
return super.getGreeting() + ", hi!"; 


}; 


此 处 调用 super.getGreeting() 等 同 于 在 上 例 的 环境 中 使 用 
Object.getPrototypeOf(this).getGreeting.call(this) 。 类似 的 ， 你 能 使 用 super 引用 来 调 
用 对 象 原 型 上 的 任何 方法 ， 只 要 这 个 引用 是 位 于 简写 的 方法 之 内 。 试 图 在 方法 简写 之 外 的 情 
况 使 用 super 会 导致 语法 错误 ， 正 如 下 例 : 


let friend = { 
getGreeting: function() { 
// 语法 错误 
return super.getGreeting() + ", hi!"; 


J; 
此 例 使 用 了 一 个 匿名 函数 作为 属性 ， 于 是 调用 super.getGreeting() 就 导致 了 语法 错误 ， 因 
为 在 这 种 上 下 文中 super 是 不 可 用 的 。 


当 使 用 多 级 继承 时 ， object.getPrototypeof() 不 再 适用 于 所 有 场景 ， 此 时 super 引用 就 能 
体现 出 它 的 强大 。 例 如 


let person = { 
getGreeting() { 
return “Hello”; 


}; 


// 原型 为 person 
let friend = { 
getGreeting() { 
return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!"; 


3; 
Object.setPrototypeOf(friend, person); 


// 原型 为 friend 
let relative = Object.create(friend); 





console.log(person.getGreeting()); // "Hello" 
console.log(friend.getGreeting()); // "Hello, hi!" 
console.log(relative.getGreeting()); // error! 


使 用 Object.getPrototypeOf() ? 在 调用 relative.getGreeting() 时 发 生 了 错误 。 这 是 因为 
此 时 this 的 值 是 relative ， 而 relative 的 原型 是 friend SHR HAE 
friend.getGreeting().call() 调用 就 会 导致 进程 开始 反复 进行 递归 调用 ， 直 到 发 生 堆 栈 错 


>a 
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此 问题 在 ESS 中 很 难 解 决 ， 但 若 使 用 ES6 的 super ， 就 很 简单 了 : 


let person = { 
getGreeting() { 
return “Hello”; 


}; 


// 原型 为 person 
let friend = { 
getGreeting() { 
return super.getGreeting() + ", hi!"; 


J; 
Object.setPrototype0f(friend, person); 


// RAA friend 


let relative = Object.create(friend); 


console.log(person.getGreeting()); // "Hello" 
console.log(friend.getGreeting()); // "Hello, hi!" 
console.log(relative.getGreeting()); Jf SHello, hale 


由 于 super 引用 并 非 是 动态 的 ， 它 总 是 能 指向 正确 的 对 象 。 在 本 例 中 ， 
super .getGreeting() 总 是 指向 person.getGreeting() ? 而 不 管 有 多 少 对 象 继 承 了 此 方法 。 


正式 的 “ 方 》 aie S 


在 ES6 之 前 ，“ 方 法 "的 概念 从 未 被 正式 定义 ， 它 此 前 仅 指 对 象 的 函数 属性 而 非 数 据 属 性 。 
ES6 则 正式 将 方法 定义 为 : 一 个 拥有 [[Homeobject]] 内 部 属性 的 函数 ， 此 内 部 属性 指向 该 方 
法 所 属 的 对 象 。 研 究 以 下 例子 : 


let person = { 


// 方法 
getGreeting() { 
return "Hello"; 


// 并 非 方法 
function shareGreeting() { 
return Hast 


} 


此 例 定 义 了 拥有 单个 getGreeting() 方法 的 person 对 象 。 由 于 getGreeting() 被 直接 赋 给 
了 一 个 对 象 ， 它 的 [[Home0bject]] 属性 值 就 是 person ° 而 另 一 方面 ， shareGreeting() 
函数 被 创建 时 并 没有 赋 给 一 个 对 外 ， 它 就 不 具备 [ [HomeObject] ] 属性 。 这 种 差异 在 大 多 数 情 
况 下 并 不 重要 ， 然 而 使 用 super 引用 时 就 完全 不 同 了 。 


任何 对 super 的 引用 都 会 使 用 [[Homeobject]] 属性 来 判断 要 做 什么 。 第 一 步 是 在 
[[HomeObject ] ] 上 调用 Object .getPrototypeof() 来 获取 对 原型 的 引用 ; 接 下 来 ， 在 该 原型 
上 查找 同名 函数 ; 最 后 ， 创 建 this 绑 定 并 调用 该 方法 。 此 处 有 个 例子 : 


let person = { 
getGreeting() { 
returni dhellos, 
} 
J; 


// 原型 为 person 
let friend = { 
getGreeting() { 
return super.getGreeting() + ", hi!"; 
} 
}; 
Object.setPrototypeOf(friend, person); 


console.log(friend.getGreeting()); // "Hello, hi!" 


调用 friend.getGreeting() 返回 了 一 1 FRE > Bp person.getGreeting() 的 返回 值 与 
hil" 的 拼接 结果 。 此 时 friend.getGreeting() 的 [[HomeObject]] 值 是 friend ， 并 且 
friend 的 原型 是 person ? 因此 super .getGreeting() 就 等 价 于 


person.getGreeting.call(this) ° 


N 


` 


aa} 


总 结 


5 


对 象 是 JS 编程 的 核心 ，ES6 对 它 进行 了 一 些 正面 改进 ， 让 它 更 易 用 也 更 强大 。 


ES6 为 对 象 字 面 量 做 了 几 个 改进 。 若 要 将 作用 域内 的 变量 赋值 给 对 象 的 同名 属性 ， 使 用 属性 
定义 速记 法 能 简化 代码 ; 可 计算 属性 名 允许 你 将 非 字面 量 的 值 指 定 为 属性 的 名 称 ， 类 似 于 此 
前 在 其 他 场合 的 用 法 ; 方法 简写 让 你 在 对 象 字面 量 中 定义 方法 时 能 省 略 冒 号 和 function 关 
键 字 ， 从 而 减少 输入 的 字符 数 ; ES6 还 舍弃 了 对 象 字 面 量 中 重复 属性 名 的 检查 ， 意 味 着 你 可 
以 在 一 个 对 象 字面 量 中 书写 两 个 同名 属性 ， 而 不 会 抛 出 错误 。 

Object.assign() 方法 让 一 次 性 更 改 单个 对 象 的 多 个 属性 变 得 更 加 容易 ， 这 在 使 用 混入 模式 时 
非常 有 用 。 object.is() 方法 对 任何 值 都 会 执行 严格 相等 比较 ， 在 处 理 特殊 的 JS 值 时 ， 它 
成 为 了 == 的 一 个 更 有 效 更 安全 的 替代 品 。 


对 象 自 有 属性 的 枚 举 顺 序 在 ES6 中 被 明确 定义 了 。 在 枚 举 属 性 时 ， 数 字 类 型 的 键 总 是 会 首先 
出 现 ， 并 按 升序 排列 ， 此 后 是 字符 串 类 型 的 键 ， 最 后 是 符号 类 型 的 键 ， 后 两 者 都 分 别 按 添 加 
顺序 排列 。 


借助 ES6 的 object.setPrototypeof() 方法 ， 能 在 对 象 创建 之 后 再 更 改 其 原型 。 


最 后 ， 你 能 用 super 关键 字 去 调用 对 象 原 型 上 的 方法 ， 所 调用 的 方法 会 被 设置 好 其 内 部 的 
this 绑 定 ， 以 自动 使 用 该 this 值 来 进行 工作 。 


第 五 章 解构 : 更 方便 的 数据 访问 


对 象 与 数组 的 字面 量 在 JS 中 是 最 常用 的 两 种 表示 法 ， 它 们 得 益 于 JSON 数据 格式 的 流行 ， 
在 语言 中 的 地 位 越发 重要 。 我 们 时 常 要 定义 对 象 与 数组 ， 然 后 有 条 不 条 地 从 这 些 结构 中 提取 
出 相关 信息 。 为 了 简化 提取 信息 的 任务 ，ES6 新 增 了 解构 ( destructuring ) ， 这 是 将 一 个 
数据 结构 分 解 为 更 小 的 部 分 的 过 程 。 本 章 介绍 如 何在 对 象 与 数组 上 利用 解构 。 


e 解构 为 何 有 用 ? 
o 对 象 解构 
o 解构 赋值 
o Rita 
o 赋值 给 非 同 名 本 地 变量 
o RBA Mt RR 
数组 解构 
o 解构 赋值 
o 默认 值 
o 瞬 套 的 解构 
o 剩余 项 
PAB] 


) 
< 


混合 

。 参数 解构 
o 解构 参数 不 可 缺失 

参数 解构 的 默认 值 


o 
o 84 


解构 为 何 有 用 ? 


在 ES5 及 更 早 版 本 中 ， 从 对 象 或 数组 中 获取 信息 ， 并 将 特定 数据 存 入 本 地 变量 ， 需 要 书写 许 
多 相似 的 代码 。 例 如 : 


let options = { 
repeat: true, 
save: false 


}; 


// 从 对 象 中 提取 数据 
let repeat = options.repeat, 
save = options.save; 


此 代码 提取 了 options 对 象 的 repeat 4 save 值 ， 并 将 其 存在 同名 的 本 地 变量 上 。 这 上 段 
代码 虽然 看 似 简单 ， 但 想象 一 下 若 有 大 量变 量 需 要 处 理 ， 就 必须 逐个 为 其 赋值 ; 并 且 若 需要 
遍历 一 个 谋 套 的 数据 结构 以 寻找 信息 ， 有 可 能 会 为 了 一 点 数据 而 挖掘 整个 结构 。 


这 就 是 ES6 为 何 要 给 对 象 与 数组 添加 解构 。 当 把 数据 结构 分 解 为 更 小 的 部 分 时 ， 从 中 提取 所 
需 数据 就 会 变 得 容易 许多 。 很 多 语言 都 能 用 精简 的 语法 来 实现 解构 ， 让 它 更 易 使 用 。 实 际 上 
ES6 的 解构 使 用 了 你 早已 熟悉 的 语法 ， 也 就 是 对 象 与 数组 的 字面 量 语法 。 


对 象 解构 
对 象 解构 语法 在 赋值 语句 的 左 侧 使 用 了 对 象 字 面 量 ， 例 如 : 


let node = { 
type: rdentrtier, 
name: "foo" 


J; 
let { type, name } = node; 


console.log(type); Teme TETEN 
console.log(name); OO 


在 此 代码 中 ， node.type 的 值 被 存储 到 type 本 地 变量 中 ， node.name 的 值 则 存储 到 
nane 变量 中 。 此 语法 与 第 四 章 介绍 过 的 属性 简写 相同 type 与 name BREEF NTA 
地 变量 ， 也 读 取 了 对 象 的 相应 属性 值 。 

切 勿 遗忘 初始 化 器 

当 使 用 解构 配合 var 、 let 或 const 来 声明 变量 时 ， 必 须 提供 初始 化 器 ( 即 等 号 右 

边 的 值 ) 。 下 面 的 代码 都 会 因为 缺失 初始 化 器 而 抛 出 错误 : 


// 语法 错误 ! 


var { type, name }; 


// 语法 错误 | 
let { type, name }; 


// 语法 错误 ! 


const { type, name }; 


无 论 是 否 使 用 解构 ， const 始终 要 求 为 变量 提供 初始 化 器 
用 解构 时 才 作 此 要 求 。 


而 var 与 let 则 仅 在 使 


解构 赋值 


以 上 对 象 解 构 示 例 都 用 于 变量 声明 。 不 过 ， 也 可 以 在 赋值 的 时 候 使 用 解构 。 有 时 或 许 会 在 变 
量 声明 之 后 再 更 改 它 们 的 值 ， 例 如 : 


let node = { 
type: rdentrtuer, 
name: "foo" 


}, 
type = "Literal", 
name = 5; 


// 使 用 解构 来 分 配 不 同 的 
({ type, name } = pia 


console.log(type); // "Tdentifier" 
console.log(name) ; // "Foo" 


在 本 例 中 ， node WRAY type 与 name 属性 在 声明 时 被 初始 化 ， 而 两 个 同名 变量 也 被 声明 
并 初始 化 为 其 他 值 。 接 下 来 一 行使 用 了 解构 表达 式 ， 通 过 读 取 node 对 象 来 更 改 这 两 个 变量 
的 值 。 注 意 你 必须 用 圆 括号 包 庄 解构 赋值 语 多 ， 这 是 因为 暴露 的 花 括 号 会 被 解析 为 代码 块 语 
负 ， 而 块 语句 不 允许 在 赋值 操作 符 ( 即 等 号 ) 左 侧 出 现 。 圆 括号 标示 了 内 部 的 花 括号 并 不 是 
块 语 名、 而 应 该 被 解释 为 表达 式 ， 从 而 完成 赋值 操作 。 


解构 赋值 表达 式 的 值 为 表达 式 右 侧 (在 = 之 后 ) 的 值 。 也 就 是 说 在 任何 需要 使 用 值 的 位 置 ， 
都 可 以 使 用 解构 赋值 表达 式 。 例 如 ， 传 递 值 给 函数 : 


let node = { 
type: "Identifier", 
name: "foo" 


}, 
type = "Literal", 
name = 5; 


function outputInfo(value) { 
console.log(value === node); Wie eles 


} 
outputInfo({ type, name } = node); 
console.log(type); // STdenturaer! 


console.log(name) ; Wi foo 


outputInfo() 函数 被 调用 时 使 用 了 一 个 解构 赋值 表达 式 作为 os °K 表达 式 计 算 算 结果 为 
node ， 也 就 是 表达 式 右 侧 的 值 。 对 type 与 name 的 赋值 正常 进行 ， 同 时 node 也 被 传 入 


了 outputInfo() 函数 。 


当 解 构 典 值 表达 式 的 右 侧 ( = 后 面 的 表达 式 ) 的 计算 结 mad null 或 undefined 时 ， 
会 抛 出 错误 。 因 为 任何 读 取 null 或 undefined 的 属性 的 企图 都 会 导致 “运行 时 "错误 ( 


runtime error ) 。 


默认 值 


pelo 


当 你 使 用 解构 赋值 语 名 时， 如果 所 指定 的 本 地 变量 在 对 象 中 没有 找到 同名 属性 ， 那 么 该 变 
会 被 赋值 为 undefined 。 例 如 : 


let node = { 
type: Nidentufier, 
name: "foo" 


}; 


let { type, name, value } = node; 


console.log(type); M “TWdentrrierY 
console.log(name) ; Ai OO 
console.log(value); // undefined 


此 代码 定义 了 一 个 额外 的 本 地 变量 value ， 并 试图 对 其 赋值 。 然 而 node 对 象 中 不 存在 同 
名 属性 ， 因 此 value 不 出 预料 地 被 赋值 为 ”undefined ° 


你 可 以 选择 性 地 定义 一 个 默认 值 ， 以 便 在 指定 属性 不 存在 时 使 用 该 值 。 若 要 这 么 做 ， 需 要 在 
属性 名 后 面 添加 一 个 等 号 并 指定 默认 值 ， 就 像 这 样 : 


let node = { 
typer a Trdentitiers, 
name: "foo" 


}; 


let { type, name, value = true } = node; 


console.log(type); // STdentkupiernY 
console.log(name) ; Wioon 
console.log(value); // enue 


在 此 例 中 ， 变 量 value 被 指定 了 一 个 默认 值 true ， 只 有 在 node 的 对 应 属性 缺失 、 或 对 
应 的 属性 值 为 undefined 的 情况 下 ， 该 默认 值 才 会 被 使 用 。 由 于 此 处 不 存在 node.value & 
? 变量 value 就 使 用 了 该 默认 值 2 这 种 工作 方式 很 像 函数 参数 的 默认 值 ( 详 见 第 三 章 ) 3 


赋值 给 非 同名 本 地 变量 


至 此 的 每 个 解构 赋值 示例 都 使 用 了 对 象 中 的 属性 名 作为 本 地 变量 的 名 称 ， 例 如 ， 把 
node.type 的 值 存储 到 type 变量 上 。 使 用 相同 名 称 时 这 么 做 没 问 题 ， 但 若 希 望 使 用 其 他 名 
称 呢 ? ES6 有 一 个 扩展 语法 ， 允 许 你 在 给 本 地 变量 赋值 时 使 用 一 个 不 同 的 名 称 ， 而 且 该 语法 
看 上 去 就 像 是 使 用 对 象 字面 量 的 非 简写 的 属性 初始 化 。 此 处 有 个 示例 : 


let node = { 
type: rodentrtuer, 
name: "foo" 


J; 
let { type: localType, name: localName } = node; 


console.log(localType); // “Identifier” 
console.log(localName) ; oo 


此 代码 使 用 了 解构 赋值 来 声 明 localType 4 localName 变量 ， YB IAP T node.type 与 
node.name 属性 的 值 。 type: localType 这 种 语法 表示 和 欲 读 取 名 为 type 的 属性 ， 并 将 它 的 
值 存储 在 变量 localType 上 。 该 语法 实际 上 与 传统 对 象 字面 量 语法 相反 ， 传 统 语法 将 名 称 放 
在 冒号 左 侧 、 值 放 在 冒号 右 侧 ; 而 在 本 例 中 ， 则 是 名 称 在 右 侧 ， 需 要 读 取 的 位 置 (对 象 属性 
Z) 则 被 放 在 了 左 侧 。 


你 也 可 以 给 变量 别名 添加 默认 值 ， 依 然 是 在 本 地 变量 名 称 后 添加 等 号 与 默认 值 ， 例 如 : 


let node = { 
type: "Identifier" 


J; 
let { type: localType, name: localName = "bar" } = node; 
console.log(localType); /Tdentrfier, 


console.log(localName); 人 air 


此 处 的 localName 变量 拥有 一 个 默认 值 由 于 node .name 属性 并 不 存在 > & 变量 最 终 被 赋 
为 默认 值 "bar" 。 


到 此 为 止 ， 你 已 经 看 到 如 何 对 属性 值 为 基本 类 型 值 的 对 象 进行 解构 ， 而 对 象 解构 也 可 被 用 于 
从 避 套 的 对 象 结 构 中 提取 属性 值 。〈 识 套 对 象 表示 对 象 的 属性 可 能 还 是 一 个 对 象 ) 
说 套 的 对 象 解构 


使 用 类 似 于 对 象 字面 量 的 语法 ， 可 以 深入 到 髋 套 的 对 象 结 构 中 去 提取 所 需 数 据 。 此 处 有 个 示 
例 : 


let node = { 
type: rodentrtuer, 
name: "foo", 


loc: { 
start: { 
line: 1, 
column: 1 
} 
end: { 
line: 1, 
column: 4 
} 
} 


J; 
let { loc: { start }} = node; 


console.log(start.line); Hf “al 
console.log(start.column); ie ak 


本 例 中 的 解构 模式 使 用 了 花 括 号 ， 表 示 应 当下 探 到 node 对 象 的 loc 属性 内 部 去 寻找 
start 属性 。 记 住 上 一 节 介绍 过 的 ， 每 当 有 一 个 冒号 在 解构 模式 中 出 现 ， 就 意味 着 冒号 之 前 
的 标识 符 代 表 需 要 检查 的 位 置 ， 而 冒号 右 侧 则 是 赋值 的 目标 。 当 冒号 右 侧 存 在 花 括号 时 ， 表 
示 目 标 被 奉 套 在 对 象 的 更 深层 次 中 。 


更 进一步 ， 在 对 象 的 谋 套 解构 中 同样 能 为 本 地 变量 使 用 不 同 的 名 称 : 
let node = { 


type: "Identifier", 
name: "foo", 


loc: { 
start: { 
line aL, 
column: 1 
}, 
end: { 
line: 1, 
column: 4 
} 
} 


}; 


// 提取 node.loc.start 
let { loc: { start: localStart }} = node; 


console.log(localStart.line); Hie al 
console.log(localStart.column); // 1 


在 此 版 本 的 代码 中 ， node.loc.start 的 值 被 存储 到 一 个 新 的 本 地 变量 localstart 上 ， 解 构 
模式 可 以 被 齿 套 在 任意 深度 的 层级 ， 并 且 在 每 个 层级 的 功能 都 一 致 。 


对 象 解构 十 分 强大 并 有 很 多 可 用 形式 ， 而 数组 解构 则 提供 了 一 些 独 特 的 能 力 ， 用 于 提取 数组 
中 的 信息 。 


语法 陷阱 
使 用 骨 套 的 解构 时 需要 小 心 ， 因 为 你 可 能 无 意 中 就 创建 了 一 个 没有 任何 效果 的 语句 。 空 
白花 括号 在 对 象 解构 中 是 合法 的 ， 然 而 它 不 会 产生 任何 效果 。 例 如 : 


// 没有 变量 被 声明 | 


let { loc: {} } = node; 


在 此 语句 中 并 未 声明 任何 变量 绑 定 。 由 于 花 括 号 在 右 侧 ， loc 被 作为 需 检 查 的 位 置 来 使 
用 ， 并 不 会 创建 变量 绑 定 。 这 种 情况 更 应 当 用 等 号 来 定义 一 个 默认 值 ， 而 不 是 用 冒号 来 
定义 一 个 位 置 。 这 种 语法 将 来 可 能 会 被 定义 为 无 效 语法 ， 然 而 现在 它 只 是 需要 规避 的 一 
个 陷阱 。 


数组 解构 


数组 解构 的 语法 看 起 来 与 对 象 解构 非常 相似 ， 只 是 将 对 象 字 面 量 替换 成 了 数组 字面 量 。 数 组 
解构 时 ， 解 构 作 用 在 数组 内 部 的 位 置 上 ， 而 不 是 作用 在 对 象 的 属性 名 上 ， 例 如 : 


let colors = | red xgreens, “blues; 
let [ firstColor, secondColor ] = colors; 
console.log(firstColor); ed 


console.log(secondColor); // “qneen” 


此 处 数组 解构 从 colors 数组 中 取出 了 "red" 与 "green" ， 并 将 它们 赋值 给 Fristcolor 
与 secondcolor 变量 。 这 些 值 根 据 它 们 在 数组 中 的 位 置 被 选择 ， 实 际 的 变量 名 称 是 随意 的 ， 
与 位 置 无 关 。 任 何 没有 在 解构 模式 中 明确 指定 的 项 都 会 被 忽略 。 记 住 ， 数 组 本 身 并 没有 发 生 
任何 改变 。 


你 也 可 以 在 解构 模式 中 忽略 一 些 项 ， 只 给 所 需 的 项 提供 变量 名 。 例 如 ， 若 只 想 获取 数组 中 的 
第 三 个 元 素 ， 那 么 不 必 给 前 两 项 提供 变量 名 。 如 下 所 示 : 


let colors = | “redi, ngreent, blue ji 
let [ , , thirdColor ] = colors; 


console.log(thirdColor); Den 


此 代码 使 用 了 解构 赋值 来 获取 colors 的 第 三 个 项 。 模 式 中 thirdcolor 之 前 的 各 号 ， 是 为 
数组 前 面 的 项 提供 的 占 位 符 。 使 用 这 种 方法 ， 你 就 可 以 轻易 从 数组 任意 位 置 取出 值 ， 而 无 须 
给 其 他 项 提供 变量 名 。 


与 对 象 解构 相似 ， 在 使 用 var 、 let 、 const 进行 数组 解构 时 ， 必 须 提供 初始 化 
ge 


解构 赋值 


你 可 以 在 赋值 表达 式 中 使 用 数组 解构 ， 但 是 与 对 象 解构 不 同 ， 不 必 将 表达 式 包 含 在 圆 括号 
内 ， 例 如 : 


let colors = | sredi, green sprue j; 
firstColor = "black", 
secondColor = "purple"; 


[ firstColor, secondColor ] = colors; 


console.log(firstColor); Z redi 
console.log(secondColor); // “green” 


此 代码 中 解构 赋值 的 工作 方式 与 上 例 相 似 ， 唯 一 区 别 是 firstcolor 4 secondcolor 变量 已 
经 被 声明 过 了 。 大 多 数 情况 下 ， 对 数组 解构 赋值 仅 需 了 解 以 上 知识 ， 但 还 有 一 个 实用 的 小 技 
Fs 


数组 解构 赋值 有 一 个 非常 独特 的 用 法 ， 能 轻易 地 互 换 两 个 变量 的 值 。 互 换 变量 值 在 排序 算法 
中 十 分 常用 ， 而 在 ES5 中 需要 使 用 第 三 个 变量 作为 临时 变量 ， 正 如 下 例 : 


// 在 ESS 中 互 换 值 
let a = 1, 

b = 2, 

tmp; 


tmp = a; 
a = b; 
b = tmp; 


console.log(a); Mf P 
console.log(b); Hf ak 


其 中 的 tm 变量 对 于 互 换 a 与 b 的 值 来 说 是 必要 的 。 然 而 若 使 用 数组 解构 赋值 ， 就 不 再 
需要 这 个 额外 变量 。 以 下 演示 了 在 ES6 中 如 何 互 换 变 量 值 : 


// 在 ES6 中 互 换 值 
let a = 1, 
b = 2; 


[a, b] =[b, a]; 


console.log(a); Wit 
console.log(b); Mi “Al 


本 例 中 的 数组 解构 赋值 看 起 来 如 同 镜像 。 赋 值 语句 左 侧 〈 即 等 号 之 前 ) 的 解构 模式 如 同 其 他 
数组 解构 的 范例 ， 右 侧 则 是 为 了 互 换 而 临时 创建 的 数组 字面 量 。 b 与 a 的 值 分 别 被 复制 到 
临时 数组 的 第 一 个 与 第 二 个 位 置 ， 对 该 数组 进行 解构 ， 于 是 两 个 变量 就 互 换 了 它们 的 值 。 


与 对 象 解 构 赋 值 相同 ， 若 等 号 右 侧 的 计算 结果 为 null 或 undefined ， 那 么 数组 解构 赋 
值 表 达 式 也 会 抛 出 错误 。 

默认 值 

数组 解构 赋值 同样 允许 在 数组 任意 位 置 指定 默认 值 。 当 指定 位 置 的 项 不 存在 、 或 其 值 为 


undefined ， 那 么 该 默认 值 就 会 被 使 用 。 例 如 : 


let colors = | "red" ]; 


let [ firstColor, secondColor = "green" ] = colors; 
console.log(firstColor); ed 
console.log(secondColor); // Queen” 


此 代码 的 colors 数组 只 有 一 个 项 ， 因 此 没有 能 与 secondcolor 匹配 的 项 ， 又 由 于 此 处 有 个 
默认 值 ， secondcolor 的 值 就 被 设置 为 "green" 而 非 undefined ° 
AREY) FRAY 
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个 数组 模式 ， 解 构 操 作 就 会 下 探 到 具 套 的 数组 中 ， 就 像 这 样 : 

let colons = | red k oreen lightoreen il blue ls; 

// 随后 

let [ firstColor, [ secondColor ] ] = colors; 


console.log(firstColor); Z uredi 
console.log(secondColor); UE SEAE 


此 处 的 secondcolor 变量 指向 了 colors 数组 中 的 "green" 值 ， 该 项 被 包含 在 第 二 个 数组 
中 ， 因 此 解构 模式 就 必须 将 secondcolor 包 庄 上 方 括 号 。 与 对 象 解构 相似 ， 你 也 能 使 用 任意 
深度 的 数组 说 套 。 


第 三 章 介 绍 过 函数 的 剩余 参数 ， 而 数组 解构 有 个 类 似 的 、 名 为 剩余 项 (rest i 的 概 
念 ， 它 使 用 ..， 语法 来 将 剩余 的 项 目 赋值 给 一 个 指定 的 变量 ， 此 处 有 个 范例 


let cologs = red oreen .blue ml; 
let [ firstColor, ...restColors ] = colors; 


console.log(firstColor); /ved 
console.log(restColors.length); // 2 
console.log(restColors[0]); // “gneen! 
console.log(restColors[i]); Hele Toye: 


colors 数组 的 第 一 项 被 赋值 给 了 firstColor 变量 ， 而 剩余 的 则 赋值 给 了 一 个 新 的 
restColors 数组 ; restcolors 数组 有 两 个 项 : "green" 与 "blue" 。 若 要 在 取出 特定 项 
之 余 保 留 剩余 的 值 ， 则 剩余 项 就 会 非常 有 用 ， 但 它 还 有 另 一 个 有 用 的 功能 。 


在 JS 中 ， 方 便 地 克隆 数组 是 个 明显 被 遗漏 的 功能 。 在 ES5 中 开发 者 往往 使 用 一 个 简单 的 方 
式 来 克隆 数组 ， 也 就 是 用 concat() 方法 ， 例 如 


// 在 ES5 中 克隆 数组 
Varm eolorse Sl redi oreen ee ole on 
var clonedColors = colors.concat(); 


console.log(clonedColors); lmednoreenalued 


尽管 concat() 方法 的 本 意 是 合并 两 个 数组 ， 但 若 不 使 用 任何 参数 来 调用 此 方法 ， 就 会 获得 
原 数 组 的 一 个 克隆 品 。 而 在 ES6 中 ， 你 可 以 使 用 剩余 项 的 语法 来 达到 同样 效果 。 实 现 如 下 : 


// 在 ES6 中 克隆 数组 

Jet colors = [| red greent buc ]; 

let [ ...clonedColors ] = colors; 
console.log(clonedColors); //™( red, green, blue” 


在 本 例 中 ， 剩 余 项 被 用 于 将 colors 数组 的 值 复 制 到 clonedcolors 数组 中 。 虽 然 从 表面 上 
来 看 ， 这 么 做 未 必 能 让 开发 者 复制 数组 的 意图 体现 得 比 使 用 concat() 方法 更 明显 ， 但 这 依 
然 是 个 值得 关注 的 技巧 。 


剩余 项 必须 是 数组 解构 模式 中 最 后 的 部 分 ， 之 后 不 能 再 有 各 号 ， 否 则 就 会 有 语法 错误 。 


混合 解构 
对 象 与 数组 解构 能 被 组 合 使 用 ， 以 创建 更 复杂 的 解构 表达 式 。 在 对 象 与 数组 混合 而 成 的 结构 
中 ， 能 在 其 中 准确 提取 所 需 的 信息 片段 。 例 如 : 


let node = { 
typer u Tdentitierii, 
name: "foo", 


loc: { 
start: { 
line: 1, 
column: 1 
}, 
end: { 
lame: 1; 
column: 4 
} 
} 
range: [0, 3] 
J; 
let { 


loc: { start }, 
range: [ startIndex ] 


} = node; 

console.log(start.line); Hf a 
console.log(start.column); Hie al 
console.log(startIndex); // 0 


此 代码 将 node.loc.start 与 node.range[6] 提取 出 来 ， 并 将 它们 的 值 分 别 存 储 到 start 与 
startIndex 上 。 要 记 住 解构 模式 中 的 loc: 与 range : 只 是 对 应 于 node 对 象 中 属性 的 位 
置 。 混 合 使 用 对 象 与 数组 解构 ， node 的 任何 部 分 都 能 提取 出 来 。 对 于 从 JOSN 配置 结构 中 
抽取 数据 来 说 ， 这 种 方法 尤其 有 用 ， 因 为 它 不 需要 探索 整个 结构 。 


参数 解构 


解构 还 有 一 个 特别 有 用 的 场景 ， 即 在 传递 函数 参数 时 。 当 JS 的 函数 接收 大 量 可 选 参 数 时 ， 一 
种 常用 模式 是 创建 一 个 包含 附加 参数 的 options 对 象 ， 就 像 这 样 : 


// options 上 的 属性 表示 附加 参数 
function setCookie(name, value, options) { 


options = options || {}; 


let secure = options.secure, 
path = options.path, 
domain = options.domain, 
expires = options.expires; 


// 2E cookie 的 代码 


} 


// 第 三 个 参数 映射 到 options 

setCookie("type", "js", { 
Secure Erue, 
expires: 60000 

}); 


很 多 JS 库 都 包含 了 与 此 例 setcookie() AM HA Hse BRA > name 与 value 参数 
是 必需 的 ， 而 secure 、 path 、 domain 与 expires 则 可 选 。 并 且 由 于 此 处 对 其 余数 据 
并 没有 顺序 要 求 ， 将 它们 作为 options 对 象 的 特定 属性 会 更 有 效 ， 避 免 列 出 一 堆 额外 的 具名 
参数 。 虽 然 这 种 方法 有 用 ， 但 无 法 仅 通过 查看 函数 定义 就 判断 出 函数 所 期 望 的 输入 ， 你 必须 
阅读 函数 体 的 代码 。 


参数 解构 提供 了 更 清楚 标明 函数 期 望 输入 的 蔡 代 方案 。 它 使 用 对 象 或 数组 解构 的 模式 百代 了 
具名 参数 。 请 查看 下 例 中 重 写 版 本 的 setcookie() 元 数 以 了 解 实际 效果 : 


function setCookie(name, value, { secure, path, domain, expires }) { 


// 设置 cookie 的 代码 


} 


setCookie("type", "js", { 
secure: true, 
expires: 60000 

H); 


此 函数 的 行为 类 似 上 例 ， 但 此 时 第 三 个 参数 使 用 了 解构 来 抽取 必要 的 数据 。 现 在 对 于 
setCookie() 函数 的 使 用 者 来 说 ， 解 构 参 数 之 外 的 参数 明显 是 必需 的 ; 而 可 选项 目 存 在 于 额 
外 的 参数 对 象 中 ， 这 同样 显而易见 ; 同时 ， 若 使 用 了 第 三 个 参数 ， 其 中 应 当 和 包含 什么 值 也 相 
当 明 确 。 解 构 参 数 在 未 传递 值 的 情况 下 会 被 设 为 undefined ， 类 似 于 常规 参数 。 


参数 解构 拥有 此 前 你 在 本 章 已 经 学 过 的 其 他 解构 方式 的 所 有 能 力 。 可 以 在 其 中 使 用 默认 
参数 x 混合 合 解构 ， 或 为 变 量 量 重 命 4 2 


解构 参数 不 可 缺失 


参数 解构 有 一 个 怪异 之 处 ， 在 默认 情况 下 ， 调 用 函数 时 未 给 参数 解构 传 值 会 抛 出 错误 。 例 
如 ， 用 以 下 方式 调用 上 例 中 的 setcookie() 函数 就 会 出 错 : 


// wee! 
setCookie("type", "js"); 


调用 时 第 三 个 参数 缺失 了 ， 它 的 值 就 变 成 了 undefined 。 这 导致 了 一 个 错误 ， 因 为 参数 解构 
实际 上 只 是 解构 声明 的 简写 。 当 setcookie() 函数 被 调用 时 ，JS 引擎 实际 上 是 这 么 做 的 : 
function setCookie(name, value, options) { 
let { secure, path, domain, expires } = options; 


// 设置 cookie 的 代码 


既然 解构 在 右 侧 的 值 为 null 或 undefined 时 会 抛 出 错误 ， 那 么 未 向 setcookie() WAte 
递 第 三 个 参数 也 就 同样 会 出 错 。 


若 解构 的 参数 是 必 选 参数 ， 那 么 上 述 特 性 并 不 会 令 人 困扰 。 但 若 期 望 它 是 可 选 的 ， 就 需要 给 
解构 的 参数 提供 默认 值 来 解决 问题 ， 就 像 这 样 : 
function setCookie(name, value, { secure, path, domain, expires } = {}) { 


YE aoe 


此 例 为 第 三 个 参数 提供 了 一 个 空 对 象 作为 其 默认 值 ， 也 就 意味 着 若 未 向 setcookie() 函数 传 
递 第 三 个 参数 ， 则 secure 、 path `œ domain 与 expires 的 值 全 都 会 是 undefined ， 此 
时 不 会 有 错误 被 抛 出 。 


参数 解构 的 默认 值 


你 可 以 为 参数 解构 提供 可 解构 的 默认 值 ， 就 像 在 解构 赋值 时 所 做 的 那样 ， 只 需 在 其 中 每 个 参 
数 后 面 添加 等 号 并 指定 默认 值 即 可 。 例 如 : 


function setCookie(name, value, 


a 
secure = false, 
path = "/", 
domain = "example.com", 
expires = new Date(Date.now() + 360000000) 
has 
) { 
UD yo 


此 代码 中 参数 解构 给 每 个 属性 都 提供 了 默认 值 ， 所 以 你 可 以 避免 检查 指定 属性 是 否 已 被 传 
es ey se ee 
使 得 函数 声明 看 起 来 比 平时 要 复杂 一 些 ， 但 只 是 为 确保 每 个 参数 都 有 可 用 的 值 而 付出 的 微小 
代价 。 

译注 : 

上 面 的 参数 解构 只 有 一 个 缺点 ， 也 就 是 当 传 入 参数 值 为 null 时 会 引发 程序 异常 。 只 有 

null 与 undefined 是 无 法 被 解构 的 ， 而 传 入 undefined 会 触发 默认 参数 的 使 用 条 

件 ， 从 而 避免 了 蜡 常 ; 但 传 入 null 就 不 会 有 这 么 幸运 了 ， 它 既 不 会 触发 默认 参数 ， 也 


x 


结 


cm 
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解构 让 JS 操作 对 象 与 数组 变 得 更 容易 。 使 用 熟悉 的 对 象 字面 量 与 数组 字面 量 语法 ， 可 以 将 数 
据 结构 分 离 并 只 获取 所 需 人 信息。 对象 解 构 模 式 允许 你 从 对 象 中 进行 提取 ， 而 数组 模式 则 能 用 
于 数组 。 


对 象 与 数组 解构 都 能 在 属性 或 项 未 定义 时 为 其 提供 默认 值 ; 在 赋值 表达 式 右 侧 的 值 为 null 
或 undefined 时 ， 两 种 模式 都 会 抛 出 错误 8 你 也 可 以 在 深层 谋 套 的 数据 结构 中 使 用 对 RAR 
组 解构 ， 下 探 到 该 结构 的 任意 深度 。 

使 用 var ` let 或 const 的 解构 声明 来 创建 变量 ， 就 必须 提供 初始 化 器 。 解 构 赋 值 能 替 
代 其 他 赋值 ， 并 且 人 允许 解构 到 对 象 属 性 或 已 有 变量 上 。 

参数 解构 使 用 解构 语法 作为 函数 的 参数 ， 让 “选项 ”( options ) 对 象 更 加 清晰 透明 ， 实 际 所 需 
数据 可 以 与 具名 参数 一 并 列 出 。 解 构 的 参数 可 以 是 对 象 模 式 、 数 组 模式 或 混合 模式 ， 并 能 使 
用 解构 的 所 有 特性 。 


第 六 章 符号 与 符号 属性 


在 JS 已 有 的 基本 类 型 〈 字 符 串 、 数 值 、 布 尔 、 null 与 undefined ) 之 外 ，ES6 引入 了 一 
种 新 的 基本 类 型 : 符号 (Symbol) 。 符号 起 初 被 设计 用 于 创建 对 象 私 有 成 员 ， 而 这 也 是 JS 
开发 者 期 待 已 久 的 特性 。 在 符号 诞生 之 前 ， 将 字符 串 作 为 属性 名 称 导 致 属性 可 以 被 轻易 访 

问 ， 无 论 使 用 何 种 命名 规则 。 而 “私有 名 称 " 意 味 着 开发 者 可 以 创建 非 字 符 串 类 型 的 属性 名 称 ， 

由 此 可 以 防止 使 用 常规 手段 来 探查 这 些 名 称 。 


“私有 名 称 " 提 案 最 终 发 展 成 为 ES6 中 的 符号 ， 而 本 章 将 会 教 你 如 何 有 效 使 用 它 。 虽 然 它 只 保 
留 了 实现 细节 (PP: 引入 了 非 字 符 串 类 型 的 属性 名 ) 而 丢弃 了 私有 性 意图 ， 但 它 仍 然 显 著 有 
别 于 对 象 的 其 余 属 性 。 


o 创建 符号 值 
e 使 用 符号 值 
。 共享 符号 值 
o 符号 值 的 转换 
e 检索 符号 属性 
。 使 用 知名 符号 暴露 内 部 方法 
o Symbol.haslnstance 属性 
o Symbol.isConcatSpreadable 
o Symbol.match ` Symbol.replace ` Symbol.search 4 Symbol.split 
o Symbol.toPrimitive 
o Symbol.toStringTag 
m 识别 问题 的 变通 解决 方法 
m ES6 给 出 的 答案 
Symbol.unscopables 


符号 没有 字面 量 形式 ， 这 在 JS 的 基本 类 型 中 是 独一无二 的 ， 有 别 于 布尔 类 型 的 true 或 数 
值 类 型 的 42 等 等 。 你 可 以 使 用 全 局 symbol 函数 来 创建 一 个 符号 值 ， 正 如 下 面 这 个 例子 : 


let firstName = Symbol(); 
let person = {}; 


person[firstName] = "Nicholas"; 
console.log(person[firstName] ); // "Nicholas" 


此 代码 创建 了 一 个 符号 类 型 的 firstname 变量 ， 并 将 它 作为 ”person 对 象 的 一 个 属性 ， 而 每 
次 访问 该 属性 都 要 使 用 这 个 符号 值 。 为 符号 变量 适当 命名 是 个 好 主意 ， 这 样 便 能 轻易 说 明 它 
的 用 意 。 


由 于 符号 值 是 基本 类 型 的 值 ， 因 此 调用 new symbol() 将 会 抛 出 错误 。 你 可 以 通过 new 
| 


Object (yourSymbol1) 来 创建 一 个 符号 实例 ， 但 尚 不 清楚 这 能 有 什么 作用 。 
Symbol 哆 数 还 可 以 接受 一 个 额外 的 参数 用 于 描述 符号 值 ， 该 描述 并 不 能 用 来 访问 对 应 属性 ， 
但 它 能 用 于 调试 ， 例 如 : 


let firstName = Symbol("first name"); 
let person = {}; 


person[firstName] = "Nicholas"; 

console.log("first name" in person); A halise 
console.log(person[firstName] ) ; // "Nicholas" 
console.log(firstName) ; // "Symbol(first name)" 


符号 的 描述 信息 被 存储 在 内 部 属性 [[Description]] 中 ， 当 符 号 的 toString() 方法 被 显 式 
或 隐 式 调用 时 ， 该 属性 都 会 被 读 取 。 在 本 例 中 ， console.log() 隐 式 调用 了 firstname 变量 
的 toString() 方法 ， 于 是 描述 信息 就 被 输出 到 日 志 。 此 外 没有 任何 办 法 可 以 从 代码 中 直接 
访问 [[Description]] 属性 。 我 建议 始终 应 给 符号 提供 描述 信息 ， 以 便 更 好 地 阅读 代码 或 进 
行 调试 。 


识别 符号 值 


/中 
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由 于 符号 是 基本 类 型 的 值 ， 因 此 你 可 以 使 用 typeof 运算 符 来 判断 一 个 变 
号 。ES6 扩充 了 typeof 的 功能 以 便 让 它 能 返回 "symbol" ， 例 如 : 


let symbol = Symbol("test symbol"); 
console.log(typeof symbol); // “symbol" 


尽管 有 其 他 办 法 可 以 判断 一 个 变量 是 否 为 符号 ， typeof 运算 符 依然 是 最 准确 、 最 优先 
的 判别 手段 。 


使 用 符号 值 


你 可 以 在 任意 能 使 用 “可 计算 属性 名 ”的 场合 使 用 符号 。 此 前 的 例子 已 经 展示 了 符号 的 方 括 号 用 
法 ， 而 在 对 象 的 “可 计算 字面 量 属性 名 "中 也 能 使 用 符号 ， 还 能 在 object.defineproperty() 或 
Object.defineProperties() 调用 中 使 用 它 ， 例 如 : 


let firstName = Symbol("first name"); 


// 使 用 一 个 可 计算 字面 量 属性 
let person = { 
[firstName]: "Nicholas" 


}; 


// TEZE EA RE 
Object.defineProperty(person, firstName, { writable: false }); 


let lastName = Symbol("last name"); 


Object.defineProperties(person, { 
[lastName]: { 
value: "Zakas", 
writable: false 


} 
}); 
console.log(person[firstName] ); // "Nicholas" 
console.log(person[lastName]); // "Zakas" 


这 个 例子 首先 使 用 对 象 的 “可 计算 字面 量 属性 "创建 了 一 个 符号 类 型 的 属性 Firstname > KB 
性 是 可 枚 举 的 (译注 : 后 面 会 提 到 与 普通 属性 的 差异 ) 。 下 一 行 代码 将 该 属性 设置 为 只 读 。 

接 下 来 ， 使 用 Object ,defineProperties'( ) 方法 创 建 了 一 个 只 读 的 符号 类 型 属性 lastname °’ 
而 此 时 再 次 使 用 了 "可 计算 字面 量 属性 "方式 ， 并 将 其 加 入 第 二 个 调用 参数 。 


既然 能 在 任意 可 使 用 “可 计算 属性 名 ”的 场合 使 用 符号 ， 你 就 需要 一 种 在 不 同 代码 段 中 共享 符号 
值 的 体系 ， 以 便 更 有 效 地 使 用 它们 。 


共和 至 符号 值 


你 或 许 想 在 不 同 的 代码 段 中 使 用 相同 的 符号 值 ， 例如: 假设 在 应 用 中 需要 在 两 个 不 同 的 对 象 
类 型 中 使 用 同一 个 符号 属性 ， 用 于 表示 一 个 唯一 标识 符 。 跨 越 文件 或 代码 来 追踪 符号 值 既 困 
难 又 易 错 ， 为 此 ，ES6 提供 了 "全 局 符号 注册 表 " 供 你 随时 访问 。 


若 你 想 创 建 共享 符号 值 ， 应 使 用 symbol.for() 方法 而 不 是 symbol() 方法 。 symbol.for() 
方法 仅 接 受 字 符 串 类 型 的 单个 参数 ， 作 为 目标 符号 值 的 标识 符 ， 此 参数 同时 也 会 成 为 该 符号 
的 描述 信息 。 例 如 : 


let uid = Symbol.for("uid"); 
let object = {}; 


object[uid] = "12345"; 


console.log(object[uid]); 
console.log(uid); 


if 
0 
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Symbol.for() 方法 首先 会 搜索 全 局 符号 注册 表 ， 看 是 否 存在 一 个 键 值 为 "uid" 的 符号 值 。 
符号 值 ; 否则 ， 会 创建 一 个 新 的 符号 值 ， 并 使 用 该 键 值 将 
其 记录 到 全 局 符号 注册 表 中 ， 然 后 返回 这 个 新 的 符号 值 。 这 就 意味 着 此 后 使 用 同一 个 键 值 去 
调用 symbol.for() 方法 都 会 返回 同一 个 符号 值 ， 就 像 下 面 这 个 例子 : 


若是 ， 该 方法 会 返回 这 个 已 存在 的 


let uid = Symbol.for("uid"); 
let object = { 

[uid]: "12345" 
}; 


console.log(object[uid]); 
console.log(uid); 


let uid2 = Symbol.for("uid"); 
console.log(uid === uid2); 


console.log(object[uid2]); 
console.log(uid2); 


ASIP > uid 与 uid2 包含 同一 


k a 


// 
// 


Ulf 
Vl 
// 
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个 符号 值 ， 因 此 它们 可 以 互 换 使 用 。 第 一 次 调用 
symbol.for() 创建 了 这 个 符号 值 ， 而 第 二 次 调用 则 从 全 局 符号 注册 表 中 将 其 检索 了 出 来 。 


共享 符号 值 还 有 另 一 个 独特 用 法 ， 你 可 以 使 用 symbol.keyFor() 方法 在 全 局 符号 注册 表 中 根 


据 符号 值 检 索 出 对 应 的 键 值 ， 例 如 


let uid = Symbol.for("uid"); 


console.log(Symbol.keyFor(uid)); 


let uid2 = Symbol.for("uid"); 


console.log(Symbol.keyFor(uid2)); 


let uid3 = Symbol("uid"); 


console.log(Symbol.keyFor(uid3) ); 


if (aire |? 


Li ae 


// undefined 


注意 : 使 用 符号 值 uid 与 uid2 都 返回 了 键 值 uid" ， 而 符号 值 uid3 在 全 局 符号 注册 


表 中 并 不 存在 ， 因 此 没有 关联 的 键 值 ， 


Symbol.keyFor() 方法 只 会 返回 undefined 。 


全 局 符号 注册 表 类 似 于 全 局 作用 域 ， 是 一 个 共享 环境 ， 这 意味 着 你 不 应 当 假设 其 中 是 否 
已 存在 某 些 值 。 在 使 用 第 三 方 组 件 时 ， 为 符号 的 键 值 使 用 命名 室 间 能 够 减少 命名 冲突 的 
可 能 性 ， 举 个 例子 : jQuery 代码 应 当 为 它 的 所 有 键 值 使 用 Ey CUI 的 前 级 ， 如 
"jquery.element" 或 类 似 的 形式 。 


类 型 转换 是 JS 语言 重要 的 一 部 分 ， 能 够 非常 灵活 地 将 一 种 数据 类 型 转换 到 其 他 类 型 。 然 而 符 
号 类 型 在 进行 转换 时 非常 不 灵活 ， 因 为 其 他 类 型 委 乏 与 符号 值 的 合理 等 价 ， 万 其 是 符号 值 无 
法 被 转换 为 字符 串 值 或 数值 。 因 此 将 符号 作为 属性 所 达成 的 效果 ， 是 其 他 类 型 所 无 法 替代 

的 。 

本 章 之 前 的 例子 使 用 了 console.log 来 展示 符号 值 的 输出 ， 这 样 做 自动 调用 了 符号 的 
String() 方法 来 产生 输出 。 你 也 能 直接 调用 stringo 方法 来 获取 相同 结果 ， 例 如 


let uid = Symbol.for("uid"), 
desc = String(uid); 


console.log(desc); // “Symbol(uid)" 
String() 方法 调用 了 uid.tostring() 来 获取 符号 的 字符 串 描述 信息 。 但 若 你 想 将 符号 与 字 
符 串 直接 拼接 ， 则 会 引发 错误 : 


let uid = Symbol.for("uid"), 
desc = uid + ""; // 引发 错误 ! 


将 uid 与 空 字符 串 相 连接 ， 会 首先 要 求 把 uid 转换 为 一 个 字符 串 ， 而 这 会 引发 错误 ， 从 而 
中 止 了 转换 行为 。 


类 似 地 ， 你 不 能 将 符号 转换 为 数值 ， 对 符号 使 用 所 有 数学 运算 符 都 会 引发 错误 ， 例 如 : 


let uid = Symbol.for("uid"), 
sum = uid / 1; // 引发 错误 ! 


此 例 试图 把 符号 值 除 以 1， 同 样 引发 了 错误 。 无 论 对 符号 使 用 哪 种 数学 运算 符 都 会 导致 错 


误 ， 不 过 使 用 逻辑 运算 符 就 不 会 ， 因 为 符号 值 在 逻辑 运 前 中 会 被 认为 等 价 于 true ， 就 像 JS 
中 其 他 的 非 空 值 那样 。 


检索 符号 属性 


Object.keys() 与 Object .getOwnPropertyNames() 方法 可 以 检索 对 象 的 所 有 属性 名 称 2 前 者 
返回 所 有 的 可 枚 举 属 性 名 称 ， 而 后 者 的 返 EE 则 不 会 顾虑 属性 是 否 可 枚 举 。 然 而 为 了 延续 它 
们 在 ES5 中 的 功能 ， 二 者 都 不 能 返回 符号 类 型 的 属性 。ES6 新 增 了 

Object .getOwnPropertySymbols() 方法 ， 以 便 检 索 对 象 的 符号 类 型 属性 


译注 : 前 面 提 到 符号 属性 默认 是 可 枚 举 的 ， 使 用 getownPropertyDescriptor() 方法 去 查 
看 即 可 证 实 这 一 点 。 原 作 误 认为 符号 属性 默认 不 可 枚 举 ， 后 来 作 了 修正 。 其 原因 就 在 于 
Object.keys() 是 忽略 符号 属性 的 ，forin 循环 遍历 也 受到 类 似 限 制 ， 这 些 特性 会 对 判 
断 符号 属性 是 否 可 枚 举 造成 干扰 。 


Object.getOwnPropertySymbols() 方法 会 返回 一 个 数组 ， 包 含 了 对 象 自 有 属性 名 中 的 符号 值 ， 
例如 : 


let uid = Symbol.for("uid"); 
let object = { 

[uid]: "12345" 
}; 


let symbols = Object.getOwnPropertySymbols(object); 


console.log(symbols.length); Lf 
console.log(symbols[®]); // "Symbol(uid)" 
console.log(object[symbols[0]]); T2345% 


这 段 代码 中 ， objet 对 象 只 拥有 一 个 名 为 uid 的 符号 类 型 属性 ， 


> 


Object .getOwnPropertySymbols() 方法 返回 的 数组 包含 了 它 。 


所 有 对 象 起 初 都 不 包含 任何 自 有 符号 类 型 属性 ， 但 对 象 可 以 从 它们 的 原型 上 继承 符号 类 型 属 
性 。ES6 预定 义 了 一 些 此 类 属性 ， 它 们 被 称 为 “知名 符号 ”。 


使 用 知名 符号 暴露 内 部 方法 


ES5 的 中 心 主题 之 一 是 定义 并 披露 了 一 些 魔 术 般 的 成 分 ’ 而 这 些 功 能 在 当时 无 法 由 开发 者 自 
行 模拟 。ES6 延续 了 这 些 工作 ， 进 一 步 暴露 了 原先 属于 语言 内 部 逻辑 的 部 分 ， 从 而 允许 使 用 
符号 类 型 的 原型 属性 来 定义 某 些 对 象 的 基础 行为 。 


ES6 定义 了 “知名 符号 "来 代表 JS 中 一 些 公共 行为 ， 而 这 些 行为 此 前 被 认为 只 能 是 内 部 操作 。 
每 一 个 知名 符号 都 对 应 全 局 symbol 对 象 的 一 个 属性 ， 例 如 symbol.create ° 
这 些 知名 符号 是 


e symbol.hasInstance : 供 instanceof 运算 符 使 用 的 一 个 方法 ， 用 于 判断 对 象 继承 关 
Ao 

e Symbol.isConcatSpreadable : S 型 值 ， 在 集合 对 象 作 为 参数 传递 给 
Array.prototype.concat() 方法 时 ， 指 示 ee 该 集合 的 元 素 扁 平 化 。 


© Symbol.iterator :返回 迭代 器 (参阅 第 八 章 ) 的 一 个 方法 。 
© Symbol.match : 供 String.prototype.match() 函数 使 用 的 一 个 方法 ， 用 于 比较 字符 串 z 
@ Symbol.replace : 供 String.prototype.replace() 函数 使 用 的 一 个 方法 ， 用 于 替换 子 字 


符 囊 。 
© Symbol.search : 供 String.prototype.search() 函数 使 用 的 一 个 方法 ， 用 于 定位 子 字符 
Bo 


© symbol.species : 用 于 产生 派生 对 象 ( 参 阅 第 九 章 ) 的 构造 器 。 

è Symbol.split : 供 String.prototype.split() 函数 使 用 的 一 个 方法 ， 用 于 分 割 字 符 串 。 

e symbol.toPrimitive : 返回 对 象 所 对 应 的 基本 类 型 值 的 一 个 方法 。 

@ Symbol.toStringTag : 供 String.prototype.toString() 函数 使 用 的 一 个 方法 ， 用 于 创建 
对 象 的 描述 信息 。 

e Symbol.unscopables : 一 个 对 象 ， 其 属性 指示 了 哪些 属性 名 不 允许 被 包含 在 with 语句 
中 。 


一 些 公用 的 知名 符号 将 在 下 面 诸 小 节 进 行 介绍 ， 而 其 余 的 则 会 在 本 书 其 他 部 分 中 讨论 ， 以 保 
证 它们 出 现在 正确 的 上 下 文中 。 


重 写 知 名 ee 成 奇异 对 象 ， 因 为 它 改变 了 一 些 默 
认 的 内 部 行为 。 这 并 不 会 对 你 的 代码 造成 实质 影响 ， 它 只 是 改变 了 规范 描述 对 象 的 方 
Ñ [0] 


Symbol.haslnstance 属性 


每 个 函数 都 具有 一 个 Symbol.hasInstance 方法 ， 用 于 判断 指定 对 象 是 否 为 本 函数 的 一 个 实 
例 。 这 个 方法 定义 在 Function.prototype 上 ， 因此 所 有 函数 都 继承 了 面 对 instanceof 运算 
符 时 的 默认 行为 。 symbol.hasInstance 属性 自身 是 不 可 写 入 、 不 可 配置 、 不 可 枚 举 的 ， 从 而 
保证 它 不 会 被 错误 重 写 


Symbol.hasInstance 方法 只 接受 单个 参数 ， 即 需要 检测 的 值 。 如 果 该 值 是 本 函数 的 一 个 实 
例 ， 则 方法 会 返回 true 。 为 了 理解 该 方法 是 如 何 工作 的 ， 可 研究 下 述 代 码 : 


obj instanceof Array; 
这 和 句 代码 等 价 于 : 

Array[Symbol.hasInstance] (obj); 
ES6 MAI EA instanceof 运算 符 重 定义 为 的 简写 语法 ， 这 样 使 用 
instanceof 便 会 触发 一 次 方法 调用 ， 实 际 上 允许 你 改变 该 运算 符 的 工作 方式 。 


例如 ， 假 设 你 想 定义 一 个 函数 ， 使 得 任意 对 象 都 不 会 被 判断 为 该 函数 的 一 个 实例 ， 你 可 以 条 
用 硬 编码 的 方式 让 该 函数 的 ”symbol.hasInstance 方法 始终 返回 false ， 就 像 这 样 


function MyObject() { 
ZY 


Object.defineProperty(MyObject, Symbol.hasInstance, { 
value: function(v) { 
return false; 


}); 
let obj = new MyObject(); 


console.log(obj instanceof MyObject); // false 


要 重 写 一 个 不 可 写 入 的 属性 ， 你 必须 像 这 个 例子 一 样 使 用 oobject.defineProperty() 。 此 代码 
将 symbol.hasInstance 方法 重 写 为 一 个 始终 返回 false 的 函数 ， 所 以 此 后 即使 传 入 的 对 象 
确实 是 Myobject 类 的 一 个 实例 ， instanceof 运算 符 仍然 会 返回 false ° 


当然 ， 你 可 以 基于 任意 条 件 来 判断 一 个 值 是 否 为 实例 。 例 如 ， 将 介 于 1 到 100 之 问 的 数值 认 
定 为 一 个 特殊 的 数值 类 型 ， 为 此 你 可 以 书写 如 下 代码 : 


function SpecialNumber() { 
// empty 


Object.defineProperty(SpecialNumber, Symbol.hasInstance, { 
value: function(v) { 
return (v instanceof Number) && (v >=1 && v <= 100); 


}); 


let two = new Number(2), 
zero = new Number(0); 


console.log(two instanceof SpecialNumber ); 7/ true 
console.log(zero instanceof SpecialNumber ); // false 


此 代码 重 写 了 symbol.hasInstance 方法 ， 在 目标 对 象 是 数值 对 象 的 实例 、 并 且 其 值 介 于 1 到 
100 之 间 时 > 返回 true ° 于 是 ” SpecialNumber 类 会 把 变量 two 判断 为 自 身 的 一 个 实 

例 ， 即 使 二 者 之 间 并 不 存在 直接 关联 。 需 要 注意 的 是 : instanceof 的 左 操 作 数 必须 是 一 个 
对 象 ， 以 便 触 发 symbol.hasInstance 调用 ; 否则 instanceof 只 会 直接 返回 false ° 


你 可 以 重 写 所 有 内 置 函 数 (例如 Date 或 Error ) 的 Symbol.hasInstance 属性 ， 但 我 
并 不 建议 这 么 做 ， 因 为 这 会 让 你 的 代码 变 得 既 难 以 预测 又 混乱 。 最 好 仅 在 必要 时 对 你 自 
己 的 函数 重 写 symbol.hasInstance ° 


Symbol.isConcatSpreadable 
JS 在 数组 上 设计 了 concat() 方法 用 于 将 两 个 数组 连接 到 一 起 ， 此 处 示范 了 用 法 : 


let colors = | redi greens ii, 
colors2 = colors1.concat([ "blue", "black" ]); 


console.log(colors2.length); ip Oh 
console.log(colors2); // ["red", "green", "blue", "black" ] 


此 代码 将 一 个 新 数组 连接 到 colorsl RA? HOI T colors2 ， 后 者 包含 了 前 两 个 数组 中 
所 有 的 项 。 不 过 ， concat() 方法 也 可 以 接受 非 数 组 的 参数 ， 此 时 这 些 参 数 只 会 直接 被 添加 
到 数组 末尾 ， 例 如 : 


letcologsi =I red .green al 
colors2 = colorsi.concat([ "blue", "black" ], "brown"); 


console.log(colors2.length); Hie 
console.log(colors2); // ["red", "green", "blue", "black", "brown" ] 


此 代码 向 concat() 方法 传递 了 一 个 额外 参数 "brow" ， 使 得 它 成 为 数组 colors2 的 第 5 
项 。 为 何 数组 类 型 的 参数 与 字符 串 类 型 的 参数 会 被 区 别 对 待 ? 这 是 因为 JS 规范 要 求 此 时 数组 
类 型 的 参数 需要 被 自动 分 离 出 各 个 子 项 ， 而 其 他 类 型 的 参数 无 需 如 此 处 理 。 在 ES6 之 前 ， 没 
有 任何 手段 可 以 改变 这 种 行为 。 


Symbol.isConcatSpreadable 属性 是 一 个 布尔 类 型 的 属性 ， 它 表示 目标 对 象 拥 有 长 度 属 性 与 数 
值 类 型 的 键 、 并 且 数 值 类 型 键 所 对 应 的 属性 值 在 参与 concat() 调用 时 需要 被 分 离 为 个 体 。 
该 符号 与 其 他 的 知名 符号 不 同 ， 默 认 情 况 下 并 不 会 作为 任意 常规 对 象 的 属性 。 它 只 出 现在 特 
定 类 型 的 对 稼 上 ， 用 来 标示 该 对 银 在 作为 concat() 参数 时 应 如 何 工 作 ， 从 而 有 效 改 变 该 对 
象 的 默认 行为 。 你 可 以 用 它 来 定义 任意 类 型 的 对 象 ， 让 该 对 象 在 参与 concat() 调用 时 能 二 
数组 类 似 ， 例 如 : 


let collection = { 


0: "Hello", 
a: wo ride, 
length: 2, 


[Symbol.isConcatSpreadable]: true 
}; 


let messages = [ "Hi" ].concat(collection); 


console.log(messages.length) ; itil $ 
console.log(messages) ; Hop PMA, ello ee wor 


本 例 中 的 collection 对 象 的 特征 类 似 于 数组 : 拥有 长 度 属 性 以 及 两 个 数值 类 型 的 键 ， 并 且 
Symbol.isConcatSpreadable 属性 值 被 设 为 true ， 用 于 指示 该 对 象 在 被 添加 到 数组 时 应 该 使 
用 分 离 的 属性 值 。 当 collection 对 象 被 传递 给 concat() 方法 时 ， "Hello" 与 "world" 
被 分 离 为 独立 的 项 ， 并 跟 在 "hi" 元 素 之 后 。 


你 也 可 以 将 数组 的 子 类 的 Symbol.isConcatSpreadable 属性 值 设 为 false ， 以 便 在 


concat() 调用 时 避免 项 目 被 分 离 。 子 类 的 介绍 位 于 第 九 章 。 


Symbol.match ` Symbol.replace ` Symbol.search 4 
Symbol.split 


在 JS 中 ， 字 符 串 与 正则 表达 式 有 着 密切 的 联系 ， 尤 其 是 字符 串 具 有 几 个 可 以 接受 正则 表达 式 
作为 参数 的 方法 : 


© match(regex) : 判断 指定 字符 串 是 否 与 一 个 正则 表达 式 相 匹配 ; 

© replace(regex, replacement) : 对 正则 表达 式 的 匹配 结果 进行 替换 ; 
e search(regex) : 在 字符 串 内 对 正则 表达 式 的 匹配 结果 进行 定位 ; 

e split(regex) :使 用 正则 表达 式 将 字符 串 分 割 为 数组 。 


这 些 与 正则 表达 式 交互 的 方法 ， 在 ES6 之 前 的 实现 细节 是 对 开发 者 隐藏 的 ， 使 得 开发 者 无 法 
将 自 定义 对 象 模拟 成 正则 表达 式 (并 将 它们 传递 给 字符 串 的 这 些 方法 ) 。 而 ES6 定义 了 4 个 
符号 以 及 对 应 的 方法 ， 将 内 置 的 RegExp 对 象 上 的 原生 行为 外 包 出 来 。 


这 4 个 符号 表示 将 正则 表达 式 作 为 字符 囊 对 应 方法 的 第 一 个 参数 传 入 时 应 调用 的 方法 ， 
symbol.match 对 应 match() 方法 ， Symbol.replace 对 应 replace() ， Symbol.search 对 
应 search() ， Symbol.split 则 对 应 split() o 这些 符号 属性 被 定义 在 RegExp.prototype 
上 作为 默认 实现 ， 以 供 对 应 的 字符 串 方 法 使 用 。 


了 解 这 些 之 后 ， 你 就 可 以 创建 一 个 类 似 于 正则 表达 式 的 对 象 ， 以 便 配 合 字符 囊 的 那些 方法 使 
用 。 在 代码 中 使 用 下 述 的 符号 函数 即 可 : 


© Symbol.match : 此 函数 接受 一 l 字符 串 参 数 并 返回 一 个 包含 匹配 结果 的 数组 3 若 匹 配 
失败 ， 则 返回 null 。 

© Symbol.replace : 此 函数 接受 一 个 字符 串 参 数 与 一 个 替换 用 的 字符 串 ， 并 返回 替换 后 的 
结果 字符 串 。 

e Symbol.search : 此 元 数 接受 一 个 字符 串 参 数 ， 并 返回 匹配 结果 的 数值 索引 ; 若 匹 配 失 
败 ， 则 返回 -1。 

© Symbol.split : 此 函数 接受 一 1 字符 串 参 数 2 并 返回 一 个 用 匹配 值 分 割 而 成 的 字符 串 数 
组 。 


在 对 象 上 定义 这 些 属性 ， 允 许 你 创建 不 使 用 正则 表达 式 却 能 进行 模式 匹配 的 对 象 ， 并 且 人 允许 
在 任何 方法 中 替代 正则 表达 式 。 此 处 有 个 例子 ， 展 示 了 这 些 符号 的 用 法 : 


// 有 效 等 价 于 /^.{10}$/ 
let hasLengthof10 { 
[Symbol.match]: function(value) { 


10 ? [value] 


return value.length HL 


]， 
[Symbol.replace]: function(value, 
10 ? replacement 


replacement) { 


return value.length : value; 


}, 
[Symbol.search]: function(value) { 
1020 


return value.length -1; 


}, 
[Symbol.split]: function(value) { 
10 ? Les, 


return value.length 


ae [value]; 


}; 


// 11 characters 
// 10 characters 


let "Hello world", 


“Helio: Johna; 


message1 


message2 


let match1 


match2 


message1.match(hasLengthOf10), 
message2.match(hasLengthOf10) ; 


console.log(match1); 
console.log(match2); 


let replace1 


replace2 


console.log(replacet1) ; 
console.log(replace2); 


message1.replace(hasLengthOf10, 
message2.replace(hasLengthOf10, 


Ver 
// ["Hello Jonnmel 


"Howdy!"), 
"Howdy!"); 


// "Hello world" 
// "Howdy!" 


let searchi = message1.search(hasLengthOf10), 


.search(hasLengthOf10) ; 


search2 = message2 


// -1 
LAO 


console.log(search1); 
console.log(search2) ; 
let spliti = 
split2 


message1.split(hasLengthOf10), 
. split (hasLengthOf10) ; 


message2 


console.log(spliti); // ("Hello world"] 


console.log(split2); ee |e ST 


hasLengthofio 对 象 模 拟 了 正则 表达 式 的 工作 方式 ， 在 字符 串 长 度 恰 好 为 10 的 时 候 起 作用 。 
hasLengthof16 对 象 上 的 四 个 方法 都 对 相应 的 符号 属性 进行 了 实现 ， 并 依次 在 两 个 字符 串 上 
被 调用 。 第 一 个 字符 串 _ messagel 长 度 为 11， 因 此 不 会 匹配 成 功 ; 而 字符 串 _ message2 KE 
为 10， 可 以 正确 匹配 。 尽 管 haslengthofio 对 象 不 是 正则 表达 式 ， 但 它 仍然 作为 参数 传递 给 
这 些 字 符 串 方法 ， 并 能 够 正常 工作 。 


这 虽然 仅 是 一 个 简单 例子 ， 却 表明 能 够 进行 比 现 有 正则 表达 式 更 复杂 的 匹配 ， 让 自 定 义 模 式 
匹配 更 加 可 行 。 


Symbol.toPrimitive 


JS 经 种 在 使 用 特定 运算 符 的 时 候 试图 进行 隐 式 转换 ， 以 便 将 对 象 转换 为 基本 类 型 值 。 例 如 ， 
当 你 使 用 相等 ( == ) 运算 符 来 对 字符 囊 与 对 象 进行 比较 的 时 候 ， 该 对 象 会 在 比较 之 前 被 转 
换 为 一 个 基本 类 型 值 。 到 底 转换 为 何 种 基本 类 型 值 ， 在 此 前 属于 内 部 操作 ， 而 ES6 则 通过 
Symbol.toPrimitive 方法 将 其 暴露 出 来 ， 以 便 让 其 可 被 更 改 。 


Symbol.toPrimitive 方法 被 定义 在 所 有 常规 类 型 的 原型 上 ， 规 定 了 在 对 象 被 转换 为 基本 类 型 
值 的 时 候 会 发 生 什 么 。 当 需要 转换 时 ， symbol.toprimitive 会 被 调用 ， 并 按照 规范 传 入 一 个 
提示 性 的 字符 串 参 数 。 该 参数 有 3 种 可 能 : 当 参 数值 为 number" 的 时 候 ， 
Symbol.toPrimitive 应 当 返 回 一 个 数值 ; 当 参 数值 为 "string" 的 时 候 ， 应 当 返 回 一 个 字符 
串 ; 而 当 参 数 为 "default" 的 时 候 ， 对 返回 值 类 型 没有 特别 要 求 。 


对 于 大 部 分 常规 对 象 ，"“ 数 值 模 式 "依次 会 有 下 述 行 
1. 调用 valueof() 方法 ， ime aes 型 值 ， 那 么 返回 它 ; 
A 


2. GM > WA tostring() 方法 ， 若 结果 是 一 个 基本 类 型 值 ， 那么 返回 它 ; 

3， 否 则 ， 抛 出 一 个 错误 。 

类 似 的 ， 对 于 大 部 分 常规 对 象 ，“ 字 符 串 模式 "依次 会 有 下 述 行 

1. 调用 tostring() 方法 ， 若 结果 是 一 个 基本 类 型 值 ， 那 么 返回 它 ; 

2. TH > HA valueof() ， 若 结果 是 一 个 基本 类 型 值 ， 那 么 oe ; 

3. 否则， 抛 出 一 个 错误 。 

在 多 数 情 况 下 ， 常 规 对 象 的 默认 模式 都 等 价 于 数值 模式 〈 只 有 date 类 型 例外 ， 它 默认 使 用 
字符 串 模 式 ) 。 通 过 定义 symbol.toprimitive 方法 ， 你 可 以 重 写 这 些 默认 的 转换 行为 。 


na, 


A EE == 运算 符 、+ 运算 符 、 或 者 传递 单一 参数 给 date 构造 器 的 时 候 被 
使 用 ， 而 大 部 分 运 Seas 串 模 式 或 是 数值 模式 。 


使 用 symbol.toPrimitive 属性 并 将 一 个 函数 赋值 给 它 ， 便 可 以 重 写 默 认 的 转换 行为 ， 例 如 


function Temperature(degrees) { 
this.degrees = degrees; 


} 
Temperature.prototype[Symbol.toPrimitive] = function(hint) { 
switch (hint) { 
case "String": 


return this.degrees + "\u00b0"; // 温度 符号 


case "number": 
return this.degrees; 


case “default: 
return this.degrees + " degrees"; 


}; 


let freezing = new Temperature(32); 


console.log(freezing + "!"); // “32 degrees!” 
console.log(freezing / 2); Lia S 
console.log(String(freezing) ); 2 


这 段 脚本 定义 了 一 个 Temperature 构造 器 ， 并 重 写 了 其 原型 上 的 symbol.toprimitive 方法 。 

返回 值 会 依据 方法 的 提示 性 参数 而 有 所 不 同 ， 可 以 使 用 字符 串 模 式 、 数 值 模式 或 是 默认 模 

式 ， 而 该 提示 性 参数 会 在 调用 时 由 JS 引擎 自动 卉 写 。 字 符 串 模式 中 ， Temperature HAA 

度 会 附带 着 Unicode 温度 符号 ; 数值 模式 只 会 返回 温度 数字 ; 而 默认 模式 中 ， 返 回 的 
昌 度 会 附带 着 字符 串 后 缓 "degrees" ° 


此 后 的 三 个 pg 语句 分 别 触 发 了 不 同 的 提示 性 参数 值 : + 运算 符 使 用 "default" 触发 了 默 
认 模 式 ; > / 还 运算 符 使 用 "number" 触发 了 数值 模式 ; 而 String() 函数 则 使 用 了 "string" 
触发 了 字符 串 模 式 。 人 允许 在 三 种 模式 下 返回 互 不 相同 的 结果 ， 但 一 般 来 说 默认 模式 的 返回 值 
都 会 与 字符 串 模 式 或 数值 模式 相等 


Symbol.toStringTag 


JS 最 有 趣 的 课题 之 一 是 在 多 个 不 同 的 全 局 执行 环境 中 使 用 ， 这 种 情况 会 在 浏览 器 页 面包 含 内 
XP (iframe ) 时 出 现 ， 此 时 页 面 与 内 联 帧 均 拥有 各 自 的 全 局 执行 环境 。 大 多 数 情 况 下 这 并 
不 是 一 个 问题 ， 使 用 一 些 轻 量 级 的 转换 操作 就 能 够 在 不 同 的 运行 环境 之 间 传 递 数据 。 而 当 对 
象 已 在 环境 之 间 经 历 了 传递 ， 再 要 识别 它们 的 类 型 时 ， 问 题 就 来 了 。 


该 问题 的 典型 伤 siete 联 帧 向 容器 页 面 传递 数组 ， 或 者 反 过 来 。 在 ES6 KEP? ARM 
与 包含 它 的 容器 分 别 拥有 一 个 不 同 的 “ 域 "， 以 作为 JS 的 运行 环境 ， 每 个 “ 域 "都 拥有 各 自 
的 全 局 作用 域 以 oy 的 全 局 对 象 描 贝 。 无 论 哪个 " 域 "创建 的 数组 都 是 正规 的 数组 ， 但 当 它 跨 


域 进行 传递 时 ， 使 用 instanceof Array 进行 检测 却 会 得 到 false 的 结果 ， 因 为 该 数组 是 由 
另外 一 个 “ 域 "的 数组 构造 器 创建 的 ， 不 同 于 当前 “ 域 " 的 数组 构造 器 


识别 问题 的 变通 解决 方法 


面 对 识 别 数组 这 类 问题 ， 开 发 者 迅速 找到 了 一 个 好 办 法 ， 他 们 发 现 通过 调用 常规 的 
toString() 方法 ， 就 会 得 到 一 个 可 预期 的 字符 串 结果 。 因 此 ， 很 多 JS EREA T OTH 
数 : 


function isArray(value) { 
return Object.prototype.toString.call(value) === "[object Array]"; 
} 


console.log(isArray([])); // enue 


这 看 起 来 是 一 种 迁 回 方式 ， 但 它 在 任何 浏览 器 中 都 能 非常 准确 地 识别 数组 。 在 数组 对 象 上 调 
用 tostring() 方法 没什么 用 处 ， 因 为 它 会 返回 由 数组 元 素 拼接 成 的 字符 串 ; 然而 若 在 
Object.prototype 上 调用 tostring() 方法 ， 却 恰巧 能 达到 目的 : 返回 值 会 包含 名 为 
[[class]] 的 内 部 定义 名 称 。 开 发 者 可 以 在 对 象 上 使 用 这 个 方法 ， 以 获知 JS 引擎 将 该 对 象 
判断 为 什么 类 型 。 


开发 者 迅速 意识 到 基于 这 种 行为 的 不 变性 ， 可 以 用 其 来 区 别 原 生 对 象 与 开发 者 自 建 对 象 ， 
中 最 重要 的 范例 就 是 ES5 的 Json 对 象 。 


在 ES5 之 前 ， 许 多 开发 者 都 使 用 了 Douglas Crockford 的 json2.js 脚本 ， 用 来 创建 全 局 的 
JSON 对 象 。 在 浏览 器 开始 实现 so 全 局 对 象 之 后 ， 就 非常 有 必要 区 分 全 局 json 对 象 是 
JS 运行 环境 自 带 的 、 还 是 由 库 文件 引入 的 。 使 用 与 识别 数组 相同 的 技术 ， 很 多 开发 者 创建 了 
如 下 的 函数 : 


function supportsNativeJSON() { 
return typeof JSON !== "undefined" && 
Object.prototype.toString.call( JSON) === "[object JSON]"; 


Object.prototype 的 特性 允许 开发 者 跨越 内 联 帧 界限 去 识别 数组 ， 而 使 用 相同 方式 可 以 辨别 
JSON 对 象 是 否 为 原生 的 。 非 原生 的 JSoN 对 象 会 返回 [object object] ， 而 原生 的 Json 
对 象 则 会 返回 [object ISON] 。 这 类 方法 也 成 为 了 识别 原生 对 象 的 事实 标准 。 


ES6 给 出 的 答案 


ES6 通过 symbol.tostringTag 重 定 义 了 相关 行为 ， 该 符号 代表 了 所 有 对 象 的 一 个 属性 ， 定 义 
了 object.prototype.toString.call() 被 调用 时 应 当 返 回 什 么 值 。 对 于 数组 来 说 ， 在 
Symbol.toStringTag 属 ， 性 中 存储 了 "Array" 值 ， 于 是 该 函数 的 返回 值 也 就 是 "Array" ° 


同样 ， 你 可 以 在 自 设 对 象 上 定义 Symbol.tostringTag 的 值 : 


function Person(name) { 
this.name = name; 


Person.prototype[Symbol.toStringTag] = "Person"; 
let me = new Person("Nicholas"); 


console.log(me.toString()); // "[object Person]" 
console.log(Object.prototype.toString.call(me) ); // “[object Person]" 


本 例 在 person 的 原型 上 定义 了 symbol.tostringtag 属性 ， 用 于 给 它 的 字符 串 表 现形 式 提 供 
默认 行为 。 由 于 person 的 原型 继承 了 Object.prototype.toString() 方法 ， 
Symbol.tostringTag 的 返回 值 在 调用 me.tostring 的 时 候 也 会 被 使 用 。 不 过 ， 你 依然 可 以 
在 该 对 象 上 定义 你 自己 的 tostring() 方法 ， 让 它 有 不 同 的 返回 值 ， 而 不 用 影响 
Object.prototype.toString.call() 方法 。 此 处 有 个 例子 : 


function Person(name) { 
this.name = name; 


Person.prototype[Symbol.toStringTag] = "Person"; 


Person.prototype.toString = function() { 
return this.name; 


J; 
let me = new Person("Nicholas"); 


console.log(me.toString()); // "Nicholas" 
console.log(Object.prototype.toString.call(me)); // "[object Person]" 


这 段 代码 让 Object.prototype.toString.call() 返回 name 属性 的 值 。 由 于 person 类 的 实 
例 不 再 继承 Object.prototype.toString() 方法 ， 调 用 me.toString() 会 显示 不 同 的 结果 。 


除非 进行 了 特殊 指定 ， 否 则 所 有 对 象 都 会 从 object.prototype 继承 
Symbol.toStringtag 属性 ， 其 默认 的 属性 值 是 字符 串 "object" œ 


对 于 开发 者 自 定 义 对 象 ， Symbol.tostringTag 的 返回 值 不 受 任何 限制 。 例 如 ， 你 可 以 自由 使 
用 "array" 作为 symbol.tostringTag 属性 的 值 ， 像 这 样 : 


function Person(name) { 
this.name = name; 
Person.prototype[Symbol.toStringTag] = "Array"; 
Person.prototype.toString = function() { 
return this.name; 
}; 


let me = new Person("Nicholas"); 


console.log(me.toString()); // "Nicholas" 
console.log(Object.prototype.toString.call(me) ); // “Tobject Array]" 


在 这 段 代码 中 ， 调 用 Object.prototype.toString() 的 结果 是 "Tobject Array]" ? 5AA E 
数组 上 调用 的 结果 完全 一 样 。 这 一 点 明确 证 实 Object.prototype.toString() 不 再 是 用 于 识别 
对 象 类 型 的 可 靠 方法 。 


改变 原生 对 象 的 字符 串 标签 也 是 可 能 的 ， 只 需要 在 对 象 的 原型 上 对 Symbol.tostringTag 进行 
赋值 ， 例 如 : 


Array.prototype[Symbol.toStringTag] = "Magic"; 
let values = []; 


console.log(Object.prototype.toString.call(values) ) ; // “[object Magic]" 


本 例 重 写 了 数组 的 symbol.tostringtag Bite > $5 object.prototype.toString() 被 调用 时 
会 返回 "[object Magic]" 。 尽 管 我 建议 不 要 用 这 种 方式 修改 内 置 对 象 ， 但 语言 本 身 并 没有 禁 
止 该 行为 。 


Symbol.unscopables 


with 语句 是 JS 语言 中 最 有 争议 的 部 分 之 一 。 它 原本 被 设计 用 于 减少 重复 代码 的 输入 ， 但 此 
后 却 遵 受 了 全 面 的 批评 ， 因 为 它 让 代码 变 得 更 难 理解 ， 并 且 有 负面 性 能 影响 ， 同 时 还 易 出 
错 。 

在 严格 模式 下 ， with 语句 最 终 被 禁用 了 ， 而 此 限制 同样 影响 了 类 与 模块 ， 因 为 它们 默认 局 
用 并 会 被 锁定 在 严格 模式 下 。 

尽管 将 来 的 代码 无 疑 会 停 用 with 语句 ， 但 ES6 仍然 在 非 严格 模式 中 提供 了 对 于 with 语 
名 的 支持 ， 以 便 向 下 兼容 。 为 此 需要 寻找 方法 让 使 用 with 语句 的 代码 能 够 继续 适当 工作 。 


为 了 理解 这 个 任务 的 复杂 性 ， 可 研究 如 下 代码 : 


let values = [1, 2, 3], 
colors = ned greeni, bluet, 
color = "black"; 


with(colors) { 
push(color); 
push(...values); 


console.log(colors); edgneen plue ee blacki al. 2, S] 


在 此 例 中 ， with 语句 内 的 两 次 push() 调用 等 价 于 colors.push() ? AA with 语句 为 
push 添加 了 局 部 绑 定 ; color 则 引用 了 在 with 语句 之 外 定义 的 变量 ; 而 values HA 
意 也 是 如 此 。 


但 ES6 为 数组 添加 了 一 个 values 方法 (可 查阅 第 八 章 : "迭代 器 与 生成 器 i Ağ 

ES6 的 环境 中 ， with 语句 内 部 的 values 并 不 会 指向 局 部 变量 values ， 而 是 会 指向 数组 
的 values 方法 ， 从 而 会 破坏 代码 的 意图 。 symbol.unscopables 符号 的 出 现 正 是 为 了 解决 这 
类 问题 。 


Symbol.unscopables 符号 在 Array.prototype 上 使 用 ， 以 指定 哪些 属性 不 允许 在 with 语句 
内 被 缚 定 。 symbol.unscopables 属性 是 一 个 对 象 ， 当 提供 该 属性 时 ， 它 的 键 就 是 用 于 忽略 
with 语句 绑 定 的 标识 符 ， 键 值 为 true 代表 屏蔽 绑 定 。 以 下 是 数组 symbol.unscopables & 
性 的 默认 值 : 


// RE ESS F 
Array.prototype[Symbol.unscopables] = Object.assign(Object.create(null), { 
copyWithin: true, 
entries: true, 
fail true, 
find: true, 
findIndex: true, 
keys: true, 
values: true 


3); 


Symbol.unscopables 对 象 使 用 Object.create(null) 创 建 ? 因此 没有 原型 a 并 包含 了 ES6 数 
组 所 有 的 新 方法 【可 参阅 第 八 章 “和 迭代 器 与 生成 器 ”、 第 十 章 “ 数 组 ") 。 在 with 语句 内 不 会 再 
对 这 些 方法 进行 绑 定 ， 因 此 昌 代 码 可 以 继续 工作 而 不 会 出 问题 。 


一 般 而 言 ， 你 无 需 在 自 定义 的 对 象 上 设置 Symbol.unscopables 属性 ， 除非 使 用 了 with 语 
多、 并 修改 了 代码 库 中 已 有 的 对 象 。 


ox 
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符号 是 JS 新 引入 的 基本 类 型 值 ， 它 用 于 创建 只 有 引用 符号 才能 访问 的 属性 。 
虽然 符号 类 型 的 属性 不 是 站 正 的 私有 属性 ， 但 它们 难以 被 开发 者 无 意 修 改 ， 因 此 非常 适用 于 
需要 提供 一 定 层次 保护 的 场合 。 


你 可 以 为 符号 提供 描述 信息 以 便 更 容易 地 辨识 它们 的 值 。 全 局 符号 注册 表 允 许 你 使 用 相同 的 
描述 信息 ， 以 便 在 不 同 的 代码 段 中 共享 符号 值 ， 这 样 相 同 的 符号 值 就 可 以 在 不 同位 置 用 于 相 
同 目的 。 


Object.keys() 或 Object .getOwnPropertyNames() 不 会 返回 符号 值 ， 因此 ES6 新 增 人 
Object .getOwnPropertySymbols() 方法 ， 允许 检索 符号 类 型 的 对 象 属性 。 而 你 依然 可 以 使 用 
Object .defineProperty'() 与 Object .defineProperties() 方法 对 符号 类 型 的 属性 进行 修改 


kk an 


“知名 符号 ?使 用 了 全 局 符号 常量 (例如 Symbol.hasInstance ) >A 常规 对 象 定义 了 一 些 功 
能 ， 而 这 些 功能 原先 仅 限 内 部 使 用 。 这 些 符 号 按 规范 使 用 symbol. 的 前 级 ， 人 允许 开发 者 通过 
多 种 方式 去 修改 常规 对 象 的 行为 。 


第 七 章 Set 与 Map 


JS 长 期 以 来 都 只 存在 一 种 集合 类 型 ， 也 就 是 数组 类 型 (尽管 有 人 会 反对 ， 声 称 所 有 非 数 组 的 
对 象 都 是 键 值 对 的 集合 ， 它 们 曾 被 用 于 与 数组 完全 不 同 的 用 途 ) 。 数 组 在 JS 中 的 使 用 正如 其 
他 语言 的 数组 一 样 ， 但 缺少 更 多 类 型 的 集合 导致 数组 也 经 常 被 当 作 队列 与 栈 来 使 用 。 数 组 只 
使 用 了 数值 型 的 索引 ， 而 若 需要 有 非 数 值 型 的 索引 ， 开 发 者 便 会 使 用 非 数 组 的 对 象 ， 用 它们 
来 定制 实现 Set 4 Map 。 


Set 是 不 包含 重复 值 的 列表 。 一 般 不 会 像 对 待 数组 那样 来 访问 Set 中 的 某 个 项 ， 更 常见 的 操作 
是 在 Set 中 检查 某 个 值 是 否 存 在 。 Map 则 是 键 与 相对 应 的 值 的 集合 。 因 此 ，Map 中 的 每 个 
项 都 存储 了 两 块 数据 ， 通 过 指定 所 需 读 取 的 键 即 可 检索 对 应 的 值 。 Map 常 被 用 作 缓存 ， 存 储 
数据 以 便 此 后 快速 检索 。 由 于 ESS 并 未 正式 提供 Set 与 Map ， 开 发 者 就 只 能 使 用 非 数组 的 
对 象 来 模拟 。 


ES6 为 JS 添加 了 Set 5 Map ， 本 章 将 论述 这 两 种 集合 类 型 你 所 需 了 解 的 全 部 内 容 。 


首先 ， 我 会 论述 在 ES6 之 前 开发 者 为 了 实现 Set 与 Map 而 采用 的 变通 方法 ， 并 描述 这 些 方 
法 的 缺陷 。 在 讲解 这 些 重要 的 背景 之 后 ， 我 会 介绍 Set 与 Map 在 ES6 中 如 何 工 作 。 


e ES5 中 的 Set 与 Map 
o 变通 方法 的 问题 
e ES6 的 Set 
o 创建 Set 并 添加 项 目 
o 移 除 值 
o Set 上 的 forEach() 方法 
o 将 Set 转换 为 数组 
o Weak Set 
a 创建 Weak Set 
n Set 类 型 之 间 的 关键 差异 
e ES6 的 Map 
o Map 的 方法 
o Map 的 初始 化 
o Map 上 的 forEach 方法 
o Weak Map 
a 使 用 Weak Map 
= Weak Map 的 初始 化 
= Weak Map 的 方法 
mt RAY ALA HE 
= Weak Map 的 用 法 与 局 限 性 
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ES5 中 的 Set 与 Map 
在 ES5 中 ， 开 发 者 使 用 对 象 属性 来 模拟 Set 与 Map ， 就 像 这 样 : 


let set = Object.create(null); 
set.foo = true; 


// 检查 属性 的 存在 性 
if (set.foo) { 


// 一 些 操作 


本 例 中 的 set 变量 是 一 个 原型 为 null 的 对 象 ， 确 保 在 此 对 象 上 没有 继承 属性 。 使 用 对 象 
的 属性 来 检测 唯一 性 ， 在 ES5 中 是 很 常用 的 方法 。 当 一 个 属性 被 添加 到 set WAN? CH 
值 也 被 设 为 true ， 因 此 条 件 判 断 语句 (例如 本 例 中 的 if 语句 ) 就 可 以 简单 判断 出 该 值 是 
否 存 在 。 


使 用 对 象 模拟 Set 与 模拟 Map 之 问 唯 一 实质 区 别 是 所 存储 的 值 。 例 如 ， 以 下 例子 将 对 象 作 为 
Map 使 用 : 


let map = Object.create(null); 
map.foo = "bar"; 


jh 提取 一 ii 值 
let value = map.foo; 


console.log(value) ; Aba 


此 代码 将 字符 串 值 bar" 存储 在 foo 键 上 。 与 Set 仅 检查 键 的 存在 性 不 同 ，Map 多 数 被 
用 来 提取 数据 。 
变通 方法 的 问题 
尽管 在 简单 情况 下 将 对 象 作为 Set 与 Map 来 使 用 都 是 可 行 的 ， 但 一 旦 接触 到 对 象 属性 的 局 限 
性 ， 此 方式 就 会 碰壁 。 例 如 ， 由 于 对 象 属 性 的 类 型 必须 为 字符 串 ， 你 就 必须 保证 任意 两 个 键 
不 能 被 转换 为 相同 的 字符 串 。 研 究 以 下 代码 : 

let map = Object.create(null); 

map[5] = "foo"; 


console.log(map["5"]); // “foo" 


本 例 将 字符 串 值 "Foo" 赋值 到 数值 类 型 的 键 5 上 ， 而 数值 类 型 的 键 会 在 内 部 被 转换 为 字符 
$> Hse mapf"s"] 与 mapis] 实际 上 引用 了 同一 个 属性 。 若 需要 将 数值 与 字符 囊 同时 作为 
键 来 使 用 ， 这 种 内 部 转换 就 会 引起 问题 。 而 若 使 用 对 象 作为 键 ， 会 出 现 另 一 个 问题 ， 例 如 


let map = Object.create(null), 
key1 = {}, 
key2 = {}; 


map[key1] = "foo"; 


console.log(map[key2]); // "foo" 


此 处 的 map[key2] 与 map[key1] 引用 了 同一 个 值 。 由 于 对 象 的 属性 只 能 是 字符 串 ， keyi 

eS A eel 
认 的 字符 串 表 示 "[object Object]" ? 从 而 指向 了 同一 个 属性 。 这 种 错误 可 能 不 太 显 眼 ， 
为 狐 似 合乎 逻辑 的 假设 是 : 如 果 在 键 上 使 用 了 不 同 对 象 ， 它 们 就 应 当 指 向 不 同 的 键 。 


由 于 对 象 会 被 转换 为 默认 的 字符 串 表 现形 式 ， 它 就 难以 被 当 作 Map 的 键 来 使 用 ， 此 问题 同样 
存在 于 将 对 象 作为 Set 来 使 用 的 尝试 上 。 


当 键 的 值 为 假 值 时 ，Map 也 会 遇 到 自身 的 特殊 问题 。 在 需要 布尔 值 的 位 置 (例如 在 if 语句 
A) ， 任 何 假 值 都 会 被 自动 转换 为 false 。 这 种 转换 单独 说 来 并 不 是 问题 ， 但 需要 对 值 的 用 法 
足够 小 心 。 例 如 ， 查 看 以 下 代码 : 


let map = Object.create(null); 


map.count = 1; 


// 是 想 检 查 "count" 属性 的 存在 性 ， 还 是 想 检查 非 零 值 ? 
if (map.count) { 
Th inne 


此 例 中 map.count 的 用 法 存在 歧义 。 此 处 的 if 语句 是 想 检 查 map.count 属性 的 存在 性 
还 是 想 检查 非 零 值 ? 该 if 语句 内 的 代码 会 被 执行 是 因为 1 ÆA 。 然 而 若 map.count 的 
值 为 0 ， 或 者 该 属性 不 存在 ， 则 if 语句 内 的 代码 都 不 会 被 执行 。 


在 大 型 应 用 中 ， 这 类 问题 都 是 难以 确认 、 难 以 调试 的 ， 这 也 是 ES6 新 增 Set 与 Map 类 型 的 
首要 原因 。 


JS 存在 in 运算 符 ， 若 属性 存在 于 对 象 中 ， 就 会 返回 true 而 无 须 读 取 对 象 的 属性 
值 。 不 过 ， in 运算 符 会 搜索 对 象 的 原型 ， 上 它 只 有 在 处 理 原 型 为 null 的 对 得 时 才 
是 安全 的 。 但 即使 原型 可 靠 ， ps IK & ey caine 代码 ， 而 不 使 用 


m o EE 
in 还 凡 付 。 


ES6 的 Set 


ES6 新 增 了 set 类 型 ， 这 是 一 种 无 重复 值 的 有 序列 表 。 人 允许 对 Set 包含 的 数据 进行 快速 访 
问 ， 从 而 能 更 有 效 地 追踪 离散 值 


创建 Set 并 添加 项 目 


Set 使 用 new set() 来 创建 ， 而 调用 ad 方法 就 能 向 Set 中 添加 项 目 ， 检 查 size 属性 
还 能 查看 其 中 包含 有 多 少 项 : 


let set = new Set() 
set.add(5); 
set.add("5"); 


console.log(set.size); ii 


Set 不 会 使 用 强制 类 型 转换 来 判断 值 是 否 重复 。 这 意味 着 Set 可 以 同时 包含 数值 5 与 字符 
囊 "5" ， 将 它们 都 作为 相对 独立 的 项 (在 Set 内 部 的 比较 使 用 了 第 四 章 讨论 过 的 
Object.is() 方法 ， 来 判断 两 个 值 是 否 相 等 ， 唯 一 的 例外 是 +0 与 -0 在 Set 中 被 判断 为 是 相 
等 的 ) 。 你 还 可 以 向 Set 添加 多 个 对 象 ， 它 们 不 会 被 合并 为 同一 项 : 


let set = new Set(), 
key1 = {}, 
key2 = {}; 


set.add(key1); 
set.add(key2); 


console.log(set.size); if 2 


由 于 keyt 与 key2 并 不 会 被 转换 为 字符 串 ， 所 以 它们 在 这 个 Set 内 部 被 认为 是 两 个 不 同 的 
项 〈 记 住 : 如 果 它 们 被 转换 为 字符 串 ， 那 么 都 会 等 于 "Tobject Object]" ) o 


如 果 add() 方法 用 相同 值 进行 了 多 次 调用 ， 那 么 在 第 一 次 之 后 的 调用 实际 上 会 被 忽略 : 


let set = new Set(); 

set.add(5); 

set.add("5"); 

set.add(5); // 重复 了 ， 该 调用 被 忽略 


console.log(set.size); Mii 


你 可 以 使 用 数组 来 初始 化 一 个 Set > FH set 构造 器 会 确保 不 重复 地 使 用 这 些 值 。 例 如 : 


let set = new Set([i, 2, 3, 4, 5, 5, 5, 5])7 
console.log(set.size); Pie 13 


在 此 例 中 ， 带 有 重复 值 的 数组 被 用 来 初始 化 这 个 Set 。 虽 然 数值 5 在 数组 中 出 现 了 四 次 ， 但 
Set 中 却 只 有 一 个 5。 若 要 把 已 存在 的 代码 或 JSON 结构 转换 为 Set 来 使 用 ， 这 种 特性 会 让 
转换 更 轻松 。 


set 构造 器 实际 上 可 以 接收 任意 可 和 迭代 对 象 作 为 参数 。 能 使 用 数组 是 因为 它们 默认 就 是 
TRY > Set 与 Map 也 是 一 样 。 set 构造 器 会 使 用 迭代 器 来 提取 参数 中 的 值 。 (可 
迭代 对 象 与 迭代 器 详 见 第 八 章 ) 


你 可 以 使 用 has() 方法 来 测试 某 个 值 是 否 存在 于 Set 中 ， 就 像 这 样 : 


let set = new Set(); 

set.add(5); 

set.add("5"); 
console.log(set.has(5)); 7/7 ere 
console.log(set.has(6)); // false 


此 处 的 Set 不 包含 6 这 个 值 ， 因 此 set.has(6) 会 返回 false ° 


移 除 值 


也 可 以 从 Set 中 将 值 移 除 。 使 用 delete() 方法 可 移 除 单个 值 ， 而 调用 clear() 方法 可 清除 
Set 中 所 有 值 。 以 下 代码 展示 了 二 者 的 作用 : 


let set = new Set(); 

set.add(5); 

set.add("5"); 
console.log(set.has(5)); 7 / enue 


set.delete(5); 


console.log(set.has(5)); // false 
console.log(set.size); af al 


set.clear(); 
console.log(set.has("5")); // false 


console.log(set.size); LE 


在 调用 delete() 之 后 ， 只 有 5 被 移 走 ; 而 执行 clear() 方法 后 ， set 就 被 清空 了 。 


所 有 这 些 方法 都 提供 了 一 个 非常 简单 的 机 制 来 追踪 有 序 的 唯一 值 。 不 过 ， 在 给 Set 添加 项 目 
之 后 ， 要 如 何 对 每 个 项 执行 操作 呢 ? 此 时 forEcah() 方法 就 派 上 用 场 了 。 


Set 上 的 forEach() 方法 


若 你 曾 处 理 过 数组 ， 或 许 已 熟悉 了 foreach) 方法 。 ES5 给 数组 添加 了 forEach() 方法 ， 
无 须 建立 for 循环 就 能 方便 地 处 理 数组 中 的 每 一 项 。 该 方法 被 开发 者 普遍 使 用 ， 于 是 Set 类 
型 也 添加 了 相同 方法 ， 其 工作 方式 也 一 致 。 


forEach() 方法 会 被 传递 一 个 回调 函数 ， 该 回调 接受 三 个 参数 : 


1. Set 中 下 个 位 置 的 值 ; 
2. 与 第 一 个 参数 相同 的 值 ; 
3. 目标 Set 自身 。 


Set 版 本 的 forEach() 方法 与 数组 版 本 有 个 奇怪 差异 : 前 者 传 给 回调 函数 的 前 两 个 参数 是 相 
同 的 。 虽 然 看 起 来 像 是 错误 ， 但 这 种 行为 却 有 个 正当 理由 。 


具有 forEach() 方法 的 其 他 对 象 〈 即 数组 与 Map) 都 会 给 回调 函数 传递 三 个 参数 ， 前 两 个 
参数 都 分 别 是 下 个 位 置 的 值 与 键 (给 数组 使 用 的 键 是 数值 索引 ) 。 


然而 Set 并 没有 键 。ES6 标准 的 制定 者 本 可 以 将 Set 版 本 forEach() 方法 的 回调 函数 设 定 
为 只 接受 两 个 参数 ， 但 这 会 让 它 不 同 于 另外 两 个 版 本 的 方法 。 于 是 他 们 找到 了 一 种 方式 让 这 
些 回调 函数 保持 参数 一 致 : 将 Set 中 的 每 一 项 同时 认定 为 键 与 值 。 这 样 Set 版 本 forEach( ) 
方法 回调 函数 的 前 两 个 参数 就 始终 相同 了 。 


除了 参数 特点 的 差异 外 ， 在 Set 上 使 用 forEach() 方法 与 在 数组 上 基本 相同 。 这 里 有 些 代码 
展示 了 该 方法 如 何 工作 : 


let set = new Set([1, 2]); 


set. forEach(function(value, key, ownerSet) { 
console.log(key + " " + value); 
console.log(ownerSet === set); 


3); 


此 代码 在 Set HAARLEM TAR > HRT HBA forEach() HAW BRO o ABR 
每 次 执行 时 ， key 与 value 总 是 相同 的 ， 并 且 ownerset 也 始终 等 于 set 。 此 代码 输 
出 : 


aial 
true 
22 
true 


与 使 用 数组 相同 ， 如 果 想 在 回调 函数 中 使 用 this ， 你 可 以 给 forEach() 传 入 一 个 this 
值 作为 第 二 个 参数 : 


let set = new Set([1, 2]); 


let processor = { 
output(value) { 
console.log(value); 


}, 
process(dataSet) { 
dataSet.forEach(function(value) { 
this.output(value); 
easy 


}; 


processor.process(set); 


本 例 中 processor.process() 方法 在 Set 上 调用 了 forEach() ， 并 传递 了 当前 this 作为 回 
BRA this 值 。 这 个 传递 十 分 必要 ， 这 样 this.output() 就 能 正确 地 解析 到 
processor.output() 方法 。 此 处 forEach() 的 回调 函数 仅 使 用 了 第 一 个 参数 value  ， 而 省 
略 了 其 余 参 数 。 你 也 可 以 使 用 箭头 函数 来 达到 相同 效果 ， 而 不 必 传 入 第 二 个 参数 ， 就 像 这 

样 : 


let set = new Set([1, 2]); 


let processor = { 
output(value) { 
console.log(value); 


}, 
process(dataSet) { 
dataSet.forEach((value) => this.output(value) ); 


} 
}; 


processor.process(set); 
本 例 中 的 箭头 函数 读 取 了 包含 它 的 _process() BA this 值 ， 因 此 就 能 正确 地 将 
this.output() 解析 为 调用 processor.output() ° 
LICE > BR Set 能 非常 好 地 追踪 值 ， 并 且 foreach 可 以 让 你 按 顺序 处 理 每 一 项 ， 但 却 无 


法 像 数组 那样 用 索引 来 直接 访问 某 个 值 。 若 有 需要 ， 最 好 的 选择 是 将 Set 转换 为 数组 。 


将 Set 转换 为 数组 


将 数组 转换 为 Set 相当 容易 
单 地 将 Set 转换 回 数 组 。 第 
函数 的 分 离 参 数 。 你 同样 能 ; 
例如 : 


， 因 为 可 以 将 数组 传递 给 set 构造 器 ; 而 使 用 扩展 运算 符 也 能 简 
三 章 介绍 的 扩展 运算 符 ( ... ) ， 能 将 数组 中 的 项 分 割 开 并 作为 
将 扩展 运算 符 用 于 Set 之 类 的 可 和 迭代 对 象 ， 将 它们 转换 为 数组 。 


let set = new Set([1, 2, 3, 3, 3, 4, 5]), 
array = [...set]; 


console.log(array); Hip \\abn 2p A 


此 处 的 Set 在 初始 化 时 载 入 了 一 个 包含 重复 值 的 数组 。 Set 清除 了 重复 值 之 后 ， 又 使 用 了 扩 
展 运 算 符 将 自身 的 项 放 到 一 个 新 数组 中 。 而 这 个 Set 仍然 包含 在 创建 时 所 接收 的 项 ( 1 > 
2 、3、 人 4 与 5 )， 这 些 项 只 是 被 复制 到 了 新 数组 中 ， 而 并 未 从 Set 中 消失 。 


若 已 存在 一 个 数组 ， 而 你 想 用 它 创建 一 个 无 重复 值 的 新 数组 时 ， 该 方法 十 分 有 用 。 例 如 


function eliminateDuplicates(items) { 
return [...new Set(items)]; 


} 


let numbers = [1, 2, 3, 3, 3, 4, 5], 
noDuplicates = eliminateDuplicates(numbers); 


console.log(noDuplicates); Uf pep By th, D] 
在 eliminateDuplicates() HAP > Set 只 是 一 个 临时 的 中 介 物 ， 以 便 在 创建 一 个 无 重复 的 
数组 之 前 过 滤 重 复 值 。 
Weak Set 


由 于 set 类 型 存储 对 象 引 用 的 方式 ， 它 也 可 以 被 称 为 Strong Set ( 强 引 用 的 Set) 。 对 象 
存储 在 set 的 一 个 实例 中 ， 实 际 上 相当 于 存储 在 变量 中 。 只 要 对 于 set 实例 的 引用 仍然 存 
在 ， 所 存储 的 对 象 就 无 法 被 垃圾 回收 机 制 回 收 ， 从 而 无 法 释放 内 存 。 例 如 


let set = new Set(), 
key = {}; 


set.add(key); 


console.log(set.size); Wipf ak 
// 取消 原始 引用 

key = null; 
console.log(set.size); Gif A 
// 重新 获得 原始 引用 


key = [...set][0]; 


在 本 例 中 ， 将 key 设置 为 null 清除 了 对 key 对 象 的 一 个 引用 ， 但 是 另 一 个 引用 还 存 于 
set 内 部 。 你 仍然 可 以 使 用 扩展 运算 符 将 Set 转换 为 数组 ， 然 后 访问 数组 的 第 一 项 ， 让 
key 变量 取 回 原先 的 对 象 。 这 种 结果 在 大 部 分 程序 中 是 没 问题 的 ， 但 有 时 会 期 望 当 其 他 引用 
HAZE? Set 内 部 的 引用 最 好 也 能 随 之 消失 。 例 如 ， 当 JS 代码 在 网 页 中 运行 并 保持 了 与 
DOM 元 素 的 联系 ， 在 该 元 素 可 能 被 其 他 脚本 移 除 的 情况 下 ， 你 应 当 不 希望 自己 的 代码 保留 对 
该 DOM 元 素 的 最 后 一 个 引用 〈 这 种 情况 被 称 为 内 存 泄 漏 ) 。 


为 了 缓解 这 个 问题 ， ES6 也 引入 了 Weak Set ， 该 类 型 只 允许 存储 对 象 弱 引 用 ， 而 不 能 存储 
基本 类 型 的 值 。 对 象 的 弱 引 用 在 它 自己 成 为 该 对 象 的 唯一 引用 时 ， 不 会 阻止 垃圾 回收 ， 


创建 Weak Set 
Weak Set 使 用 weakset 构造 器 来 创建 ， 并 包含 add() 方法 、 has() 方法 以 及 delete() 
方法 。 以 下 例子 使 用 了 这 三 个 方法 : 


let set = new WeakSet(), 
key = {}; 


// 将 对 象 加 入 set 


set.add(key); 
console.log(set.has(key)); // true 
set.delete(key); 


console.log(set.has(key)); // false 


使 用 Weak Set 很 像 在 使 用 正规 的 Set 。 你 可 以 在 Weak Set 上 添加 、 移 除 或 检查 引用 ， 也 可 
以 给 构造 器 传 入 一 个 可 和 迭代 对 象 来 初始 化 Weak Set 的 值 : 


let key1 = {}, 
key2 = {}, 
set = new WeakSet([key1, key2]); 


console.log(set.has(key1)); // true 
console.log(set.has(key2)); // true 


在 本 例 中 ， 一 个 数组 被 传 给 了 weakset 构造 器 。 由 于 该 数组 包含 了 两 个 对 象 ， 这 些 对 象 就 被 
添加 到 了 Weak Set 中 。 要 记 住 若 数组 中 包含 了 非 对 象 的 值 ， 就 会 抛 出 错误 ， 因 为 ”Weakset 


构造 器 不 接受 基本 类 型 的 值 。 


Set 类 型 之 间 的 关键 差异 


let set = new WeakSet(), 
key = {}; 


// 将 对 象 加 入 set 


Set . Baden 


console.log(set.has(key)); // true 
// 移 除 对 于 键 的 最 后 一 个 强 引 用 ， 同 时 从 Weak Set 中 移 除 
key = null; 


Weak Set 与 正规 Set 之 间 最 大 的 区 别 是 对 得 的 弱 引 用 。 此 处 有 个 例子 说 明了 这 种 差异 : 


当 此 代码 被 执行 后 ，Weak Set 中 的 key 引用 就 不 能 再 访问 了 。 这 一 点 无 法 核实 ， 因 为 需要 
把 对 于 该 对 象 的 一 个 引用 传递 给 has() 方法 (而 只 要 存在 其 他 引用 ，Weak Set 内 部 的 弱 引 
用 就 不 会 消 4 o 这 会 让 Weak Set 的 引用 特征 难以 测试 ， 但 你 可 以 信任 JS 引擎， 引用 已 正 


确 地 被 移 除 了 。 


这 些 例子 演示 了 Weak Set 与 正规 Set 的 一 些 共 有 特征 ， 但 它们 还 有 一 些 关 键 的 差异 : 


1. 对 于 weakset EH > SAA add() 方法 时 传 入 了 非 对 象 的 参数 ， 就 会 抛 出 错误 ， 


has() 或 delete() 则 会 在 传 入 了 非 对 象 的 参数 时 返回 false ; 
2. Weak Set TTR > Ask KARAT for-of 循环 ; 


3. Weak Set 无 法 暴露 出 任何 迭代 器 (例如 keys) 4 values() FH) ， 因 此 没有 任何 编 


程 手 段 可 用 于 判断 Weak Set 的 内 容 ; 
4. Weak Set 没有 forEach() 方法 ; 
5. Weak Set 没有 size 属性 。 


Weak Set 看 起 来 功能 很 有 限 ， 而 这 对 于 正确 管理 内 存 而 言 是 必要 的 。 一 般 来 说 ， 
对 象 的 引用 ， 应 当 使 用 Weak Set 而 不 是 正规 Set 。 


若 只 想 追 踪 


Set 给 了 你 处 理 值 列表 的 新 方式 ， 不 过 它 无 法 给 这 些 值 添加 额外 信息 。 因 此 ES6 也 添加 了 
Map 类 型 o 


ES6 的 Map 


ES6 的 map 类 型 是 键 值 对 的 有 序列 表 ， 而 键 和 值 都 可 以 是 任意 类 型 。 键 的 比较 使 用 的 是 
Object.is() ， 5 与 "5" 的 类 型 不 同 ， 因 此 你 能 将 它们 同时 作为 键 来 使 用 。 这 与 使 用 对 象 
来 模拟 Map 截然 不 同 ， 因 为 对 象 的 属性 会 被 强制 转换 为 字符 串 。 


你 可 以 调用 set() 方法 并 给 它 传 递 一 个 键 与 一 个 关联 的 值 ， 来 给 Map 添加 项 ; 此 后 使 用 刍 
名 来 调用 get() 方法 便 能 提取 对 应 的 值 。 例 如 


let map = new Map(); 
map.set("title", "Understanding ES6"); 
map.set("year", 2016); 


console.log(map.get("title")); // “Understanding ES6" 
console.log(map.get("year")); // 2016 


此 例 存 储 了 两 个 键 值 对 。 "title" 键 存储 了 一 个 字符 事 ， 而 "year" 键 则 存储 了 一 个 数值 ， 
此 后 调用 get() 方法 提取 出 了 二 者 的 值 。 如 果 指 定 键 不 存在 于 Map 中 ， 则 get() 方法 就 
会 返回 特殊 值 undefined ° 


你 也 可 以 将 对 象 作为 键 ， 这 也 是 之 前 使 用 对 象 来 模拟 Map 的 变通 方法 所 无 法 做 到 的 。 此 处 有 
个 例子 : 


let map = new Map(), 
key1 = {}, 
key2 = {}; 


map.set(key1, 5); 
map.set(key2, 42); 


console.log(map.get(key1)); // 5 


console.log(map.get(key2)); Wife 


此 代码 使 用 了 对 象 keyl 4 key2 作为 Map 的 键 ， ART AA 。 由 于 这 些 键 不 
会 被 强制 转换 成 其 他 形式 ， 每 个 对 象 就 都 被 认为 是 唯一 的 键 。 这 允许 你 给 对 象 关 联 额外 数 
据 ， 而 无 须 修 改 对 象 自身 。 


Map 的 方法 


Map 与 Set 有 意 共享 了 几 个 方法 ， 允 许 你 使 用 相似 方式 来 与 Map 及 Set 进行 交互 。 以 下 三 个 
方法 在 Map 与 Set 上 都 存在 : 


: 判断 指定 的 键 是 否 存 在 于 Map 中 ; 
© delete(key) : 移 除 Map 中 的 键 以 及 对 应 的 值 ; 
: 移 除 Map 中 所 有 的 键 与 值 。 


© has(key) 


e clear() 


Map 同样 拥有 size 属性 ， 用 于 指明 包含 了 多 少 个 键 值 对 。 以 下 代码 用 不 同方 式 使 用 了 这 三 
种 方法 以 及 size 属性 : 


let map = new Map(); 
map.set("name", "Nicholas"); 


map.set("age", 25); 


console.log(map.size); Hf PD 
console.log(map.has("name")); Hf WARS 
console.log(map.get("name")); // "Nicholas" 
console.log(map.has("age")); // true 
console.log(map.get("age")); HE 
map.delete("name"); 
console.log(map.has("name")); // false 
console.log(map.get("name")); // undefined 
console.log(map.size); Uf a 
map.clear(); 

console.log(map.has("name")); // false 
console.log(map.get("name")); // undefined 
console.log(map.has("age")); // false 
console.log(map.get("age")); // undefined 
console.log(map.size); // 0 


与 用 于 Set 时 一 样 ， 
有 "name" 与 "age" 两 个 键 ， 因 此 传递 这 两 个 键 给 has() 方法 都 会 返回 true 
"name" 键 被 delete() 方法 移 除 后 ， 使 用 "name" 调用 has() 方法 就 会 返回 false 


size 属性 总 是 包含 了 Map 中 键 值 对 的 数量 。 此 例 中 的 map 实例 起 初 


。 在 
， 并 


E size 属性 表明 Map 的 项 减少 了 一 个 。 之 后 clear() 方法 移 除 了 残存 的 键 ， 此 时 用 两 个 
键 调用 has() 方法 都 会 返回 false 


， 而 size 属性 则 变 成 了 0 。 


clear() 方法 是 从 Map 中 移 除 大 量 数据 的 快速 方法 ， 同 样 也 有 一 次 性 将 大 量 数 据 添加 到 


Map 的 方法 : 


Map 的 初始 化 


依然 类 似 于 Set ， 你 能 将 数组 传递 给 Map 构造 器 ， 以 便 使 用 数据 来 初始 化 一 个 Map 。 该 数 
组 中 的 每 一 项 也 必须 是 数组 ， 内 部 数组 的 首 个 项 会 作为 键 ， 第 二 项 则 为 对 应 值 。 这 样 整个 
Map 就 被 这 些 双 项 数组 所 填充 。 例 如 : 


let map = new Map([["name", "Nicholas"], ["age", 25]]); 


console.log(map.has("name")); // true 
console.log(map.get("name")); // "Nicholas" 
console.log(map.has("age")); // true 
console.log(map.get("age")); 7/25 
console.log(map.size); // 2 


通过 构造 器 中 的 初始 化 ， "name" 与 "age" 这 两 个 键 就 被 添加 到 map 变量 中 。 虽 然 由 数组 
构成 的 数组 看 起 来 有 点 奇怪 ， 这 对 于 准确 表示 键 来 说 却 是 必要 的 : 因为 键 允 许 是 任意 数据 类 
型 ， 将 键 存储 在 数组 中 ， 是 确保 它们 在 被 添加 到 Map 之 前 不 会 被 强制 转换 为 其 他 类 型 的 唯一 
方法 。 


Map 上 的 forEach 方法 


Map 的 forEach() 方法 类 似 于 Set 与 数组 的 同名 方法 ， 它 接受 一 个 能 接收 三 个 参数 的 回调 函 
数 : 


1. Map 中 下 个 位 置 的 值 ; 
2. 该 值 所 对 应 的 键 ; 
3. 目标 Map 自身 。 


回调 函数 的 这 些 参数 更 紧密 回合 了 数组 foreach) 方法 的 行为 ， 即 : 第 一 个 参数 是 值 、 第 二 
个 参数 则 是 键 (数组 中 的 键 是 数值 索引 ) 。 此 处 有 个 示例 : 


let map = new Map([ name "Nicholas"], ["age", 25]]); 


map.forEach(function(value, key, ownerMap) { 
console.log(key + " " + value); 
console.log(ownerMap === map); 


3); 


forEach() 的 回调 函数 输出 了 传 给 它 的 信息 R 其 中 value 与 key 被 直接 输出 ” ownerMap 
与 map 进行 了 比较 ， 说 明 它 们 是 相等 的 。 这 样 输出 了 : 


name Nicholas 
true 

age 25 

true 


传递 给 forEach() 的 回调 函数 接收 了 每 个 键 值 对 ， 按 照 键 值 对 被 添加 到 Map 中 的 顺序 。 这 
种 行为 与 在 数组 上 调用 foreach) 方法 有 所 不 同 ， 后 者 的 回调 函数 会 按 数值 索引 的 顺序 接收 
到 每 一 个 项 。 


你 也 可 以 给 foreach) 提供 第 二 个 参数 来 指定 回调 函数 中 的 this 值 ， 其 行为 与 Set 版 
本 的 forEach() 一 致 。 


Weak Map 


Weak Map 对 Map 而 言 ， 就 像 Weak Set 对 Set 一 样 : Weak 版 本 都 是 存储 对 象 弱 引用 的 方 
式 。 在 Weak Map 中 ， 所 有 的 键 都 必须 是 对 象 (尝试 使 用 非 对 象 的 键 会 抛 出 错误 ) ， 而 且 这 
些 对 象 都 是 弱 引 用 ， 不 会 干扰 垃圾 回收 。 当 Weak Map 中 的 键 在 Weak Map 之 外 不 存在 引用 
时 ， 该 键 值 对 会 被 移 除 。 


Weak Map 的 最 佳 用 武之 地 ， 就 是 在 浏览 器 中 创建 一 个 关联 到 特定 DOM 元 素 的 对 象 。 例 如 ， 
某 些 用 在 网 页 上 的 JS 库 会 维护 一 个 自 定 义 对 象 ， 用 于 引用 该 库 所 使 用 的 每 一 个 DOM 元 素 ， 
并 且 其 映射 关系 会 存储 在 内 部 的 对 象 缓存 中 。 


该 方法 的 困难 之 处 在 于 : 如 何 判断 一 个 DOM 元 素 在 网 页 中 已 不 复 存 在 ， 以 便 该 库 能 移 除 此 元 
素 的 关联 对 象 。 若 做 不 到 ， 该 库 就 会 继续 保持 对 DOM 元 素 的 一 个 无 效 引 用 ， 并 造成 内 存 泄 
漏 。 使 用 Weak Map 来 追踪 DOM 元 素 ， 依 然 允 许 将 自 定 义 对 象 关 联 到 每 个 DOM 元 素 ， 而 
在 此 对 象 所 关联 的 DOM 元 素 不 复 存 在 时 ， 它 就 会 在 Weak Map 中 被 自动 销毁 。 


必须 注意 的 是 ，Weak Map 的 键 才 是 弱 引 用 ， 而 值 不 是 。 在 Weak Map 的 值 中 存储 对 


象 ， 就 算 该 对 象 的 其 他 引用 已 全 都 被 移 除 ， 也 会 阻止 垃圾 回收 。 
使 用 Weak Map 


ES6 的 weakMap 类 型 是 键 值 对 的 无 序列 表 ， 其 中 键 必 须 是 非 null 的 对 象 ， 值 则 允许 是 任意 类 
型 。 WeakMap 的 接口 与 map 的 非常 相似 ， 都 使 用 set() 与 get() 方法 来 分 别 添加 与 提取 
数据 : 


let map = new WeakMap(), 
element = document.querySelector(".element"); 


map.set(element, "Original"); 


let value = map.get(element); 
console.log(value); // "Original" 


// 移 除 元 素 
element .parentNode.removeChild(element); 
element = null; 


// 该 Weak Map 在 此 处 为 空 
此 例 存 储 了 一 个 键 值 对 。 element 键 是 一 个 DOM 元 素 ， 用 于 存储 一 个 关联 的 字符 串 值 。 将 


此 DOM 元 素 传 递 给 get() 方法 ， 就 能 提取 对 应 的 值 。 随 后 将 此 DOM 元 素 从 页 面 文档 中 移 
除 、 并 且 将 引用 它 的 变量 设置 为 null ， 则 对 应 的 数据 也 就 会 在 Weak Map 中 被 移 除 。 


类 似 于 Weak Set ， 没 有 任何 办 法 可 以 确认 Weak Map 是 否 为 室 ， 因 为 它 没 有 size 属性 。 
在 其 他 引用 被 移 除 后 ， 由 于 对 键 的 引用 不 再 有 残留 ， 也 就 无 法 调用 get() 方法 来 提取 对 应 的 
值 。Weak Map 已 经 切断 了 对 于 该 值 的 访问 ， 其 所 占 的 内 存在 垃圾 回收 器 运行 时 便 会 被 释 
放 。 


Weak Map 的 初始 化 


为 了 初始 化 Weak Map ， 需 要 把 一 个 由 数组 构成 的 数组 传递 给 weakMap 构造 器 。 就 像 正 规 
Map 构造 器 那样 ， 每 个 内 部 数组 都 应 当 有 两 个 项 ， 第 一 项 是 作为 键 的 非 null 的 对 象 ， 第 二 项 
则 是 对 应 的 值 (允许 任意 类 型 ) 。 例 如 : 


let key1 
key2 


{}, 
{}, 
map = new WeakMap([[keyi1, "Hello"], [key2, 42]]); 


console.log(map.has(key1)); // true 
console.log(map.get(key1)); ye Makeulaloy™ 
console.log(map.has(key2)); 1 SEGUE 
console.log(map.get(key2)); // 42 


对 象 keyl 与 key2 被 用 作 Weak Map 494%, get() 与 has() 方法 能 访问 它们 。 在 传递 给 
WeakMap 构造 器 的 参数 中 ， 若 任意 键 值 对 使 用 了 非 对 象 的 键 ， 构 造 器 就 会 抛 出 错误 。 


Weak Map 的 方法 


Weak Map 只 有 两 个 附加 方法 能 用 来 与 键 值 对 交互 。 has() 方法 用 于 判断 指定 的 键 是 否 存在 
T Map 中 ， 而 delete) 方法 则 用 于 移 除 一 个 特定 的 键 值 对 。 与 Weak Set 相同 ， 枚 举 
Weak Map 既 没 必要 也 不 可 能 ， 因 此 clear() 方法 也 不 存在 。 以 下 例子 同时 用 到 了 has() 
与 delete() 方法 : 


let map = new WeakMap(), 
element = document.querySelector(".element"); 


map.set(element, "Original"); 


console.log(map.has(element)); // true 
console.log(map.get(element) ); // "Original" 


map.delete(element) ; 
console.log(map.has(element)); // false 
console.log(map.get(element) ); // undefined 


此 处 一 个 DOM 元 素 再 次 在 Weak Map 中 被 作为 键 来 使 用 。 has() 方法 能 够 查看 一 个 引用 是 
否 被 用 作 了 Weak Map 的 键 。 但 需要 注意 ， 必 须要 有 对 于 该 键 的 另 一 个 非 空 引用 ， 才 能 使 用 
此 方法 。 而 使 用 delete) 方法 则 会 把 键 从 Weak Map 中 强制 移 除 ， 此 后 用 该 键 调用 has() 


方法 就 会 返回 false ， get() 方法 则 会 返回 undefined 。 


对 象 的 私有 数据 


虽然 大 多 数 开发 者 认为 Weak Map 的 主要 用 途 是 关联 数据 与 DOM 元 素 ， 但 仍然 还 存在 许多 
可 能 的 用 法 (并 且 无 颖 仍 有 一 些 用 法 尚未 被 发 现 ) 。 Weak Map 的 一 个 实际 应 用 是 在 对 象 实 
例 中 存储 私有 数据 。 在 ES6 中 对 象 的 所 有 属性 都 是 公开 的 ， 因 此 若 想 让 数据 仅 对 于 对 象 自身 
可 访问 ， 那 么 就 需要 一 些 创造 力 。 研 究 以 下 例子 : 


function Person(name) { 
this._name = name; 


} 


Person.prototype.getName = function() { 
return this._name; 


}; 


此 代码 使 用 了 公共 约定 的 下 划 线 来 表示 私有 属性 ， 以 表明 一 个 成 员 应 当 被 认为 是 私有 的 ， 不 
应 从 对 象 实例 外 进行 修改 。 此 处 的 意图 是 只 允许 用 getName() 来 访问 this. name  ， 而 不 允 
许 name 的 值 被 修改 。 然 而 ， 毫 无 办 法 阻止 任何 人 写 入 name 属性 ， 所 以 它 依然 能 够 被 有 
意 或 无 意 地 改写 。 


在 ESS 中 能 够 创建 几乎 真正 私有 的 数据 ， 只 要 在 创建 对 象 时 使 用 类 似 下 面 的 模式 : 


var Person = (function() { 


var privateData = {}, 
privatelId = 0; 


function Person(name) { 
Object.defineProperty(this, "_id", { value: privateId++ }); 


privateData[this._id] = { 
name: name 
J; 
} 


Person.prototype.getName = function() { 
return privateData[this._id].name; 


}; 


return Person; 


}()); 


此 例 用 IFE EXT person 的 定义 ， 其 中 含有 两 个 私有 变量 : privatepata 与 privateId 
。 privatepata 对 象 存储 了 所 有 实例 的 私有 信息 ， 而 privateId 则 被 用 于 为 每 个 实例 产生 一 
个 唯一 ID 。 当 person 构造 器 被 调用 时 ， 一 个 不 可 枚 举 、 不 可 配置 、 不 可 写 入 的 _id 属性 


就 被 添加 了 。 


接 下 来 在 privatepata 对 象 中 建立 了 与 实例 ID 对 应 的 一 个 入 口 ， 其 中 存储 着 name 的 值 。 
随后 在 getName() BAP > MAE A this._id 作为 privateData 的 键 来 提取 该 值 。 由 于 
privateData 无 法 从 IIFE 外 部 进行 访问 ， 实 际 的 数据 就 是 安全 的 ， 尽 管 this. id 在 
privateData 对 人 象 上 依然 是 公开 暴露 的 。 


此 方式 的 最 大 问题 在 于 privatepata 中 的 数据 永 不 会 消失 ， 因 为 在 对 象 实例 被 销毁 时 没有 任 
何方 法 可 以 获知 该 数据 ， privatepata 对 象 就 将 永远 包含 多 余 的 数据 。 这 个 问题 现在 可 以 改 
用 Weak Map 来 解决 了 ， 如 下 : 


let Person = (function() { 
let privateData = new WeakMap(); 


function Person(name) { 
privateData.set(this, { name: name }); 


} 


Person.prototype.getName = function() { 
return privateData.get(this).name; 


}; 


return Person; 


}()); 


此 版 本 的 person 范例 使 用 了 Weak Map 而 不 是 对 象 来 保存 私有 数据 。 由 于 person RA 
实例 本 身 能 被 作为 键 来 使 用 ， 于 是 也 就 无 须 再 记录 单独 的 ID 。 当 person 构造 器 被 调用 时 ， 
将 this 作为 键 在 Weak Map 上 建立 了 一 个 入 口 ， 而 包含 私有 信息 的 对 象 成 为 了 对 应 的 值 ， 
其 中 只 存放 了 name 属性 。 通 过 将 this 传递 给 privatepata.get() AA? ARM xt KF 
访问 其 name 属性 ， getname() 函数 便 能 提取 私有 信息 。 这 种 技术 让 私有 信息 能 够 保持 私有 
状态 ， 并 且 当 与 之 关联 的 对 象 实例 被 销毁 时 ， 私 有 信息 也 会 被 同时 销毁 。 


Weak Map 的 用 法 与 局 限 性 


当 需 要 在 Weak Map 与 正规 Map 中 作出 抉择 时 ， 首 要 考虑 因素 在 于 你 是 否 只 想 使 用 对 象 类 型 
的 键 。 若 是 ， 那 么 最 好 的 选择 就 是 Weak Map ， 因 为 它 能 确保 额外 数据 在 不 再 可 用 后 被 销 
毁 ， 从 而 能 优化 内 存 使 用 并 规避 内 存 泄漏 。 


要 记 住 Weak Map 只 为 它们 的 内 容 提供 了 很 低 的 可 见 度 ， 因 此 你 不 能 使 用 forEach() 方法 、 
size 属性 或 clear() 方法 来 管理 其 中 的 项 。 如 果 你 确实 需要 一 些 检测 功能 ， 那 么 正规 Map 
会 是 更 好 的 选择 ， 只 是 一 定 要 确保 留意 内 存 的 使 用 。 


当然 ， 若 你 只 是 想 使 用 非 对 象 的 键 ， 那 么 正规 Map 就 是 唯一 选择 。 


ES6 正式 将 Set 与 Map 引入 了 JS 。 在 此 之 前 ， 开 发 者 往往 使 用 对 象 来 模拟 它们 ， 但 由 于 与 
对 象 属性 有 关 的 限制 ， 经 常会 碰壁 。 


Set 是 无 重复 值 的 有 序列 表 。 根 据 object.is() 方法 来 判断 值 的 不 等 性 ， 以 确保 无 重复 。 

Set 会 自动 移 除 重复 的 值 ， 因 此 你 可 以 使 用 它 来 过 滤 数 组 中 的 重复 值 并 返回 结果 。 Set 并 不 是 
数组 的 子 类 型 ， 所 以 你 无 法 随机 访问 其 中 的 值 。 但 你 可 以 使 用 naso 方法 来 判断 茶 个 值 是 否 
存在 于 Set 中 ? 或 通过 size 属性 来 查看 其 中 有 多 少 个 值 。 set 类 型 还 拥有 forEach() 方 
法 ， 用 于 处 理 每 个 值 。 


Weak Set 是 只 能 包含 对 象 的 特殊 Set。 其 中 的 对 象 使 用 弱 引 用 来 存储 ， 意 味 着 当 Weak Set 
中 的 项 是 某 个 对 象 的 仅 存 引用 时 ， 它 不 会 阻碍 垃圾 回收 。 由 于 内 存 管理 的 复杂 性 Weak Set 
的 内 容 不 能 被 检查 ， 因 此 最 好 仅 将 Weak Set 用 于 追踪 需要 被 归 组 在 一 起 的 对 象 。 


Map 是 有 序 的 键 值 对 ， 其 中 的 键 允许 是 任何 类 型 。 与 Set 相似 ， 通 过 调用 objectis) 方法 
来 判断 重复 的 键 ， 这 意味 着 能 将 数值 5 SPER "5" 作为 两 个 相对 独立 的 键 。 使 用 

set() 方法 能 将 任何 类 型 的 值 关联 到 某 个 键 上 ， 并 且 此 后 能 用 get() 方法 将 该 值 提取 出 
Ke Map 也 拥有 一 个 size 属性 与 一 个 forEach() 方法 ， 让 项 目 访问 更 容 称 。 


Weak Map 是 一 种 特殊 的 Map ， 和 包含 的 键 只 能 是 对 象 类 型 。 与 Weak Set 相似 ， 键 的 对 象 引 
用 是 弱 引 用 ， 因 此 当 它 是 某 个 对 象 的 仅 存 引用 时 ， 也 不 会 阻碍 垃圾 回收 。 当 键 被 回收 之 后 ， 

所 关联 的 值 也 同时 从 Weak Map 中 被 移 除 。 对 于 与 对 象 相 关联 的 附加 信息 来 说 ， 若 要 在 访问 
它们 的 代码 之 外 对 其 进行 生命 周期 管理 ， 则 Weak Map 在 内 存 管理 方面 的 特性 让 它们 成 为 了 


唯一 合适 的 选择 。 


第 八 章 迭代 器 与 生成 器 


许多 编程 语言 都 将 迭代 数据 的 方式 从 使 用 for 循环 转变 到 使 用 迭代 器 对 象 ， for 循环 需要 
初始 化 变 集合 内 的 位 置 ， 而 和 迭代 器 则 以 编程 方式 返回 集合 中 的 下 一 个 项 。 和 迭代 器 

能 使 操作 集合 变 得 更 简单 ， ERs EI lee. 当 新 的 数组 方法 与 新 的 集合 类 型 

(例如 Set 与 ) 结合 时 ， 和 迭代 器 就 是 高 效 数 据 处 理 的 关键 。 并 且 在 JS 语言 的 很 多 新 成 
分 中 也 能 找到 和 迭代 器 : 新 增 的 for-of 与 它 协同 工作 ， 扩 展 运 算 符 ( ... ) 也 使 用 了 它 

而 它 甚至 还 能 让 异步 操作 更 易 完 


本 章 涵盖 了 和 迭代 器 的 许多 用 法 ， 但 首先 来 说 ， 重 点 要 理解 迭代 器 被 加 入 JS 的 背后 历史 。 


© 循环 的 问题 
e 何 为 迭代 器 ? 
e 何 为 生成 器 ? 
o 生成 器 函数 表达 式 
o 生成 器 对 象 方法 
© 可 迭代 对 象 与 for-of 循环 
o 访问 默认 和 迭代 器 
o 创建 可 迭代 对 象 
o 内 置 的 迭代 器 
o 集合 的 迭代 器 
= entries() 迭代 


rf 


= Values() 迭代 器 
m keys() 迭代 器 
E 集合 类 型 的 默认 和 迭代 
o 字符 串 的 迭代 器 
o NodeList 的 迭代 器 
© 扩展 运算 符 与 非 数 组 的 可 迭代 对 象 
© EXE RADE 
o 传递 参数 给 迭代 器 
(0) 在 迭代 器 中 抛 出 错误 
o 生成 器 的 Return 语句 
o 生成 器 委托 
e 异步 任务 运行 
o 一 个 简单 的 任务 运行 器 
o 带 数 据 的 任务 运行 
o 异步 任务 运行 器 


e@ 总 结 


id 


a8 


循环 的 问题 
如 果 你 曾 用 JS 编写 过 程序 ， 那 么 或 许 写 过 如 下 代码 : 


Van colors = red “green. be 


for (var i = 0, len = colors.length; i < len; i++) { 
console.log(colors[i]); 


} 


此 处 使 用 了 for a i 变量 来 追踪 colors 数组 中 的 位 置 索引 。 i 
的 值 小 于 暂 存在 len 变量 中 的 数组 长 度 时 ， 循 环 每 一 次 执行 都 会 递增 i 的 值 。 


虽然 这 个 循环 非常 直观 ， 然 而 若 它 被 上 底 套 使 用 而 要 追踪 多 个 变量 时 ， 复 杂 度 就 会 提高 ， 由 此 
也 更 容易 引发 错误 。 相 似 的 for 循环 代码 会 被 写 在 多 个 地 方 ， 一 不 小 心 就 会 写 错 循环 变量 。 
迭代 器 正 是 用 来 解决 此 问题 的 。 


TARRE 


迭代 器 是 被 专用 设计 用 于 迭代 的 对 象 ， 带 有 特定 接口 。 所 有 的 迭代 器 对 象 都 拥有 next() 方 

法 ， 调 用 时 会 返回 一 个 结果 对 象 。 结 果 对 象 有 两 个 属性 : 对 应 下 一 个 值 的 value ， 以 及 一 个 
布尔 类 型 的 done ， 其 值 为 true 时 表示 没有 更 多 值 可 供 使 用 is 和 迭代 器 持 有 一 个 指向 集合 位 
置 的 内 部 指针 ， 每 当 调 用 了 next() 方法 ， 和 迭代 器 就 会 返回 相应 的 下 一 个 值 。 


若 在 最 后 一 个 值 被 返 ae next() ? 所 返回 的 done 属性 值 会 是 true ， 并 且 
value 属性 值 会 是 迭代 器 自身 的 返回 值 ( return value ， 即 使 用 return 语句 明确 返回 的 
值 ) LOI TIE Ri ， 却 会 成 为 迭代 器 数据 的 最 后 一 个 片段 。 它 类 似 于 函 
数 的 返回 值 ， 是 向 调用 者 返回 信息 的 最 后 手段 ， 在 未 提供 时 会 使 用 undefined 。 


记 住 这 些 特性 后 ， 在 ESS 中 创建 一 个 迭代 器 就 相当 简单 了 : 


function createIterator(items) { 


var i = 0; 


return { 
next: function() { 


var done = (i >= items.length); 
var value = !done ? items[i++] : undefined; 


return { 
done: done, 
value: value 


}; 


var iterator = createIterator([1, 2, 3]); 


console.log(iterator.next()); // "{ value: 1; done: false} 
console.log(iterator.next()); Hap Ml EMTS A CONG elle p 
console.log(iterator.next()); M “4 values 3, done: false}! 
console.log(iterator.next()); L/S Valuer eundefaned, done enue 


// 之 后 的 所 有 调用 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


createIterator() 函数 返回 一 个 带 有 next() 方法 的 对 象 。 每 当 调 用 此 方法 时 ， items 数 
组 的 下 一 个 值 就 会 作为 value 属性 的 值 被 返回 。 当 i 的 值 为 3 时 ， done 属性 变 成 true 
> 并且 利用 三 元 运算 符 将 value 指定 为 undefined ° done 与 value 二 者 最 终 的 结果 符 
合 了 ES6 和 迭代 器 规则 最 后 的 特殊 情况 ， 也 就 是 在 数据 所 有 片段 都 被 使 用 之 后 的 选 代 器 上 调用 
next() 方法 。 


正如 此 例 所 示 ， 根 据 ES6 制定 的 规则 来 书写 迭代 器 稍微 有 点 复杂 。 


幸好 ，ES6 还 提供 了 生成 器 ， 让 创建 迭代 器 对 象 变 得 更 简单 。 


TAERE? 


生成 器 ( generator ) 是 能 返回 一 个 迭代 器 的 函数 。 生 成 器 函数 由 放 在 function 关键 字 之 
后 的 一 个 星 号 ( * ) 来 表示 ， 并 能 使 用 新 的 yield 关键 字 。 将 星 号 紧 跟 在 function 关键 
字 之 后 ， 或 是 在 中 间 留 出 空格 ， 这 两 种 写法 都 没 问 题 ， 正 如 下 例 : 


// 生成 器 


function *createIterator() { 


yield 1; 

yield 2; 

yield 3; 
} 
// 生成 器 能 像 正 规 函 数 那样 被 调用 ， 但 会 返回 一 个 迭代 器 
let iterator = createIterator(); 
console.log(iterator.next().value); Life 
console.log(iterator.next().value); IU 2 
console.log(iterator.next().value); MU R 


createIterator() 前 面 的 星 号 让 此 函数 变 成 一 个 生成 器 。 yield 关键 字 也 是 ESS 新 特性 
指定 了 next() 方法 调用 迭代 器 时 应 当 按 顺序 返回 的 值 。 此 例 所 生成 的 迭代 器 能 够 在 
next() 方法 调用 成 功 时 返回 三 个 不 同 的 值 : 依次 是 1 、 2 > 3 。 生 成 器 能 像 其 他 任意 
函数 那样 被 调用 ， 正 如 示例 中 创建 iterator 的 代码 。 


生成 器 函数 最 有 意思 的 特性 可 能 就 是 它们 会 在 每 个 yield 语句 后 停止 执行 。 例 如 ， 此 代码 中 
yield 1 执行 后 ， 该 函数 将 不 会 再 执行 任何 操作 ， 直 到 迭代 器 的 next() 方法 被 调用 才 继续 
执行 yield 2 。 在 函数 中 停止 执行 的 能 力 分 外 强大 ， 并 能 引出 生成 器 函数 的 一 些 有 趣 的 用 法 
ELARRE RADE) 。 


yield 关键 字 可 用 于 值 或 表达 式 ， 因 此 你 可 以 通过 生成 器 给 迭代 器 添加 项 目 ， 而 不 是 机 械 式 
地 将 项 目 一 个 个 列 出 。 作 为 一 个 例子 ， 此 处 给 出 了 在 for 循环 内 使 用 yield 的 方法 : 


function *createIterator(items) { 
for (let i = 0; i < items.length; i++) { 
yield items[i]; 


let iterator = createIterator([i, 2, 3]); 





console.log(iterator.next()); Hak Mal Weve al, Cheyne ellis: je 
console.log(iterator.next()); if "i values 2, done: false} 
console.log(iterator.next()); ue VEGE S CON alse ty 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


// 之 后 的 所 有 调用 


console.log(iterator.next()); // Sov ole suncdehined, done ue 


此 例 传 递 了 一 个 名 为 items 的 数组 给 createIterator() 生成 器 函数 。 在 此 元 数 内 ， for 
循环 在 循环 执行 时 从 数组 中 返回 元 素 给 迭代 器 。 每 当 遇 到 yield ， 循 环 就 会 停止 ; 而 每 当 
iterator 上 的 next() 方法 被 调用 ， 循 环 就 会 继续 执行 下 一 条 yield TB a] © 


生成 器 函数 是 ES6 的 一 个 重要 特性 ， 它 能 被 用 于 所 有 可 使 用 函数 的 位 置 。 本 节 剩 余部 分 会 聚 
焦 在 书写 生成 器 的 其 他 有 用 方法 上 。 


yield 关键 字 只 能 用 在 生成 器 内 部 ， 用 于 其 他 任意 位 置 都 是 语法 错误 ， 即 使 在 生成 器 内 
SB ik AY HAP WL RAT > Eto sk Hi : 
function *createIterator(items) { 
items.forEach(function(item) { 
// 语法 错误 
yield item + 1; 


Y); 
} 


尽管 yield 严格 位 于 createIterator() 内 部 ， 但 它 无 法 穿越 函数 边界 ， 因 此 这 段 代码 
仍然 有 语法 错误 。 在 内 上 训 函数 中 yield 与 return 非常 相似 ， 二 者 均 不 能 用 作 外 层 函 
数 的 返回 语句 。 


Em ds HA RIK 


你 可 以 使 用 函数 表达 式 来 创建 一 个 生成 器 ， 只 要 在 function 关键 字 与 圆 括号 之 间 使 用 一 个 
星 号 ( * ) 即 可 。 例 如 : 


let createIterator = function *(items) { 
for (let i = 0; i < items.length; i++) { 
yield items[i]; 


}; 


let iterator = createIterator([i, 2, 3]); 


console.log(iterator.next()); // "{ value: 1, done: false }" 
console.log(iterator.next()); // "{ value: 2, done: false }" 
console.log(iterator.next()); // an walues 3, done: false }! 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


// 之 后 的 所 有 调用 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


此 代码 中 的 createIterator() 是 一 个 生成 器 函数 表达 式 ， 而 不 是 一 个 函数 声明 。 这 个 函数 表 
达 式 是 匿名 的 ， 因 此 星 号 只 能 放置 在 function 关键 字 与 圆 括 号 之 间 。 除 此 之 外 ， 此 例 与 前 
一 个 版 本 的 createIterator() 函数 没有 区 别 ， 都 使 用 了 一 个 for 循环 。 


不 能 用 箭头 函数 创建 生成 器 。 


生成 器 对 象 方法 
由 于 生成 器 就 是 函数 ， 因 此 也 可 以 被 添加 到 对 象 中 。 例 如 ， 你 可 以 在 ESS 风格 的 对 象 字面 量 
中 使 用 函数 表达 式 来 创建 一 个 生成 器 : 


var o=f{ 


createIterator: function *(items) { 
for (let i = 0; i < items.length; i++) { 


yield items[i]; 
} 
}; 


let iterator = o.createIterator([1, 2, 3]); 
你 也 可 以 使 用 ES6 方法 的 速记 法 ， 只 要 在 方法 名 之 前 加 上 一 个 星 号 ( * ) 


var oO={ 


*createIterator(items) { 
for (let i = 0; i < items.length; i++) { 


yield items[i]; 
} 
}; 


let iterator = o.createIterator([1, 2, 3]); 


这 些 例 子 的 功能 等 价 于 “生成 器 函数 表达 式 "小 节 中 的 例子 ， 只 是 语法 有 区 别 。 在 速记 法 版 本 
中 ， 由 于 createIterator() 方法 没有 使 用 function 关键 字 来 定义 ， 星 号 紧 贴 在 方法 名 之 前 
书写 ， 不 过 其 实在 星 号 与 方法 名 之 间 可 以 留 出 空格 。 


TIARA RA for-of 循环 

TRAE (iterable ) 是 包含 symbol.iterator 属性 的 对 象 ， 与 迭代 器 紧密 相关 。 这 个 
Symbol.iterator 知名 符号 定义 了 为 指定 对 象 返 回 和 迭代 器 的 函 数 。 在 ES6 中 ， 所 有 的 集合 对 
象 (数组 、Set 与 Map ) 以 及 字符 串 都 是 可 迭代 对 象 ， 因 此 它们 都 有 默认 的 迭代 器 。 可 迭代 
对 象 被 设计 用 于 与 ES 新 增 的 for-of 循环 配合 使 用 。 


生成 器 默认 会 为 symbol.iterator BEM > AEH RARER TRARY 


在 本 章 开 头 我 曾 提 到 过 在 for 循环 中 追踪 索引 的 问题 。 迭 代 器 是 解决 此 问题 的 第 一 部 分 ; 
for-of 循环 则 是 第 二 部 分 > 它 完全 消除 了 追踪 集合 索引 的 必要 ， 让 你 无 拘束 地 专注 于 操作 集 
合 内 容 。 


for-of 循环 在 循环 每 次 执行 时 会 调用 可 和 迭代 对 象 的 next() 方法 ， 并 将 结果 对 象 的 value 
值 存储 在 一 个 变量 上 。 循 环 过 程 会 持续 到 结果 对 象 的 done 属性 变 成 true 为 止 。 此 处 有 个 
范例 : 


let values = [1, 2, 3]; 


for (let num of values) { 
console.log(num); 


} 
此 代码 输出 了 如 下 内 容 : 
1 
2 
3 


这 里 的 for-of 循环 首先 调用 了 values 数组 的 Symbol.iterator 方法 ， 获 取 了 一 个 迭代 
器 ， 这 个 调用 由 JS 引 擎 在 后 合 进行 。 接 下 来 iterator.next() 被 调用 ， 迭代 器 结果 对 象 的 
value 属性 被 读 出 并 放 入 了 num 变量 ， 依 次 为 1、2、3。 当 结果 对 象 的 done 变 成 
true ， 和 循环 立 刻 结 束 ， 因 此 num 绝 不 会 被 赋值 为 undefined ° 

若 仅 需 选 代数 组 或 集合 的 值 ， 那 么 使 用 for-of MAMIE for 循环 就 是 个 好 主意 。 for-of 
循环 一 般 不 易 出 错 ， 因 为 需要 留意 的 条 件 更 少 ; 传统 的 for 循环 则 被 用 于 处 理 更 复杂 的 控制 
条 件 。 


在 不 可 迭代 对 象 、 null 或 undefined 上 使 用 for-of 语句 ， 会 抛 出 错误 。 
访问 默认 迭代 器 
你 可 以 使 用 symbol.iterator 来 访问 对 象 上 的 默认 迭代 器 ， 就 像 这 样 : 


let values = [1, 2, 3]; 
let iterator = values[Symbol.iterator](); 


console.log(iterator.next()); // *{ value: a, done: false }¥ 
console.log(iterator.next()); if el WEN A Choe wells bY 
console.log(iterator.next()); // "{ value: 3, done: false Ti 


console.log(iterator.next()); w/valuemnundetined done true sty 


此 代码 获取 了 values 数组 的 默认 选 代 器 ， 并 用 它 来 迭代 数组 中 的 项 。 这 与 使 用 for-of 循 
环 时 在 后 台 发 生 的 过 程 一 致 。 


既然 symbol.iterator 指定 了 默认 和 迭代 器 ， 你 就 可 以 用 其 来 检测 一 个 对 象 是 否 能 被 迭代 ， 正 
如 下 例 : 


function isIterable(object) { 


return typeof object[Symbol.iterator] === "function"; 
} 
console.log(isIterable([1, 2, 3])); // true 
console.log(isIterable("Hello")); // true 
console.log(isIterable(new Map())); // true 
console.log(isIterable(new Set())); Ui ENUE 


console.log(isIterable(new WeakMap())); // false 
console.log(isIterable(new WeakSet())); // false 


这 个 isIterable() HAE TAERAA- ANAE A BAN RUVEAKS © for-of 14 
环 在 执行 之 前 会 做 类 似 的 检查 。 


本 节 至 今 的 范例 已 经 展示 了 如 何在 内 置 的 可 迭代 类 型 上 使 用 symbol.iterator ， 但 你 也 能 用 
Symbol.iterator 属性 来 自 定 义 可 迭代 对 象 。 


创建 可 先 代 对 象 


开发 者 自 定义 对 象 默 认 情 况 下 不 是 可 迭代 对 象 ， 但 你 可 以 创建 一 个 包含 生成 器 的 
Symbol.iterator 属性 ， 将 它们 变 成 可 和 迭代 对 象 。 例 如 


let collection = { 
items: [], 
*[Symbol.iterator]() { 
for (let item of this.items) { 
yield item; 


}; 
collection.items.push(1); 
collection.items.push(2); 


collection.items.push(3); 


for (let x of collection) { 
console.log(x); 


此 代码 输出 了 如 下 内 容 : 


本 例 首先 用 Symbol.iterator 方法 (注意 其 名 称 之 前 也 有 星 号 ) 创建 了 生成 器 ， 为 
collection 对 象 定义 了 一 个 默认 的 和 迭代 器 。 接 下 来 该 生成 器 使 用 了 一 个 for-of 循环 来 对 
this.items 中 的 值 进行 和 迭代， 并 使 用 了 yield 来 返回 每 个 值 。 collection 对 象 依 靠 
this.items 的 默认 迭代 器 来 工作 ， 而 不 是 对 预定 义 的 值 进行 手动 迭代 以 产生 返回 结果 。 


本 章 后 面 的 “生成 器 委托 "会 描述 一 种 不 同方 法 ， 能 使 用 别 的 对 象 的 迭代 器 。 
现在 你 已 经 看 到 了 数组 上 默认 迭代 器 的 一 些 用 法 ， 但 ES6 中 还 内 置 了 更 多 的 迭代 器 ， 以 便 更 轻 
多 地 处 理 数 据 集合 。 
内 置 的 迭代 器 


迭代 器 是 ES6 的 一 个 重要 部 分 ， 正 因 如 此 ， 语 言 已 默认 为 许多 内 置 类 型 创建 了 迭代 器 ， 你 无 


须 自 行 实现 。 只 有 当 才 有 必要 创建 自 定 义 和 迭代 器 ， 这 通常 发 
生 在 定义 你 自己 的 对 象 或 类 时 。 最 常用 的 迭代 器 或 许 就 存在 于 集合 上 。 
集合 的 迭代 器 


ES6 具有 三 种 集合 对 象 类 型 : 数组 、 Map 5 Set 。 它 们 都 拥有 如 下 的 迭代 器 ， 便 于 探索 其 内 


e entries() : 返回 一 个 包含 键 值 对 的 迭代 器 5 
e values() : 返回 一 个 包含 集合 中 的 值 的 和 迭代 器 ; 
© keys() : 返回 一 个 包含 集合 中 的 键 的 迭代 器 。 


你 可 以 调用 上 述 方法 之 一 来 提取 集合 中 的 迭代 器 。 
entries() AAS 


entries() 和 迭代 器 会 在 每 次 next() 被 调用 时 返回 一 个 双 项 数组 ， 表 示 集 合 中 每 个 元 素 的 键 
与 值 : 对 于 数组 来 说 ， 第 一 项 是 数值 索引 ; 而 对 于 Set ， 第 一 项 既是 键 又 是 值 Map 的 第 
项 也 是 键 。 


此 处 有 使 用 此 先 代 器 的 一 些 范例 : 


let colors = | “red, deenme ohue ]; 
let tracking = new Set([1234, 5678, 9012]); 
let data = new Map(); 


data.set("title", "Understanding ES6"); 
data.set("format", "ebook"); 


for (let entry of colors.entries()) { 
console.log(entry); 


for (let entry of tracking.entries()) { 
console.log(entry); 


for (let entry of data.entries()) { 
console.log(entry); 


调用 console.log() 输出 了 以 下 内 容 : 


[0， "red"] 
[1, "green"] 
[2, "blue"] 


[1234, 1234] 

[5678, 5678] 

[9012, 9012] 

["title", "Understanding ES6"] 
["format", "ebook" ] 


此 代码 在 每 种 集合 类 型 上 都 使 用 了 entries 方法 来 提取 迭代 器 ， 并 且 使 用 for-of 循环 来 
迭代 它们 的 项 。 此 处 控制 台 的 输出 说 明了 每 个 对 象 的 键 与 值 是 如 何 被 成 对 返回 的 。 


= 


values() 和 迭代 器 


values() 和 迭代 器 仅仅 能 返回 存储 在 集合 内 的 值 ， 例 如 : 


let colors = | “red, deenme ohue ]; 
let tracking = new Set([1234, 5678, 9012]); 
let data = new Map(); 


data.set("title", "Understanding ES6"); 
data.set("format", "ebook"); 


for (let value of colors.values()) { 
console.log(value) ; 


for (let value of tracking.values()) { 
console.log(value); 


for (let value of data.values()) { 
console.log(value); 


此 代码 输出 了 如 下 内 容 : 


"red" 

"green" 

"blue" 

1234 

5678 

9012 

"Understanding ES6" 
"ebook" 


正如 本 例 所 显示 的 ， 调 用 values() 和 迭代 器 返回 了 每 种 类 型 中 包含 的 准确 数据 ， 而 没有 这 些 
数据 在 集合 内 的 任意 位 置信 息 。 


keys() 迭代 器 


keys() 迭代 器 能 返回 集合 中 的 每 一 个 键 。 对 于 数组 来 说 ， 它 只 返回 了 数值 类 型 的 键 ， 永 不 返 
回 数 组 的 其 他 自 有 属性 ; Set 的 键 与 值 是 相同 的 ， 因 此 它 的 keys() 与 values() 会 返回 相 
AMAR ; 对 于 Map ， keys) 选 代 器 返回 了 每 个 不 重复 的 键 。 此 处 有 个 例子 演示 了 这 三 
种 情况 : 


let colors = | “red, deenme ohue ]; 
let tracking = new Set([1234, 5678, 9012]); 
let data = new Map(); 


data.set("title", "Understanding ES6"); 
data.set("format", "ebook"); 


for (let key of colors.keys()) { 
console.log(key); 
} 


for (let key of tracking.keys()) { 
console.log(key); 
} 


for (let key of data.keys()) { 
console.log(key); 
} 


本 例 输出 了 如 下 内 容 : 


0 

1 

2 

1234 
5678 
9012 
"title" 
"format" 


keys() 迭代 器 获取 了 colors ` tracking 与 data 各 自 的 键 ， 这 些 键 在 三 个 for-of MA 
环 中 被 打印 出 来 。 对 于 数组 对 象 来 说 ， 只 有 数值 类 型 索引 被 打印 了 ， 即 使 你 向 数组 添加 了 具 
名 属性 也 依然 如 此 。 这 与 在 数组 上 使 用 for-in 循环 是 不 同 的 ， 因 为 for-in 循环 会 迭代 所 
有 属性 而 不 仅 是 数值 索引 。 


集合 类 型 的 默认 迭代 器 


当 for-of 循环 没有 显 式 指定 迭代 器 时 ， 每 种 集合 类 型 都 有 一 个 黑 认 的 和 欠 代 器 供 循 环 使 用 。 
values() 方法 是 数组 与 Set 的 默认 和 迭代 器 ， 而 entries() 方法 则 是 Map 的 默认 和 迭代 器 。 在 
for-of 循环 中 使 用 集合 对 象 时 ， 这 些 默认 选 代 器 会 让 处 理 更 容易 一 些 。 作 为 例子 ， 研 究 如 下 
代码 : 


let colors = | “red, deenme blue ]; 
let tracking = new Set([1234, 5678, 9012]); 
let data = new Map(); 


data.set("title", "Understanding ES6"); 
data.set("format", "print"); 


// 与 使 用 colors.values() 相同 
for (let value of colors) { 
console.log(value); 


// 与 使 用 tracking.values() 相同 
for (let num of tracking) { 
console.log(num); 


// 与 使 用 data.entries() 相同 
for (let entry of data) { 
console.log(entry); 


此 处 没有 明确 指定 迭代 器 ， 因 此 会 使 用 默认 的 迭代 器 函数 。 数 组 、Set 与 Map 的 默认 迭代 器 
反映 了 这 些 对 象 是 如 何 被 初始 化 的 ， 于 是 此 代码 会 输出 如 下 内 容 : 


"red" 

"green" 

"blue" 

1234 

5678 

9012 

["title", "Understanding ES6"] 
["format", "print"] 


默认 情况 下 ， 数 组 与 Set 输出 了 它们 的 值 ， 而 Map 返回 的 则 是 可 以 直接 传 给 map 构造 器 的 
数组 格式 。 另 一 方面 ，Weak Set 与 Weak Map 并 未 拥有 内 置 的 迭代 器 ， 使 用 弱 引 用 意味 着 
无 法 获知 这 些 集合 内 部 到 底 有 多 少 个 值 ， 同时 意味 着 没有 方法 可 以 近代 这 些 值 。 


解构 与 for-of 循环 


Map 默认 迭代 器 的 行为 有 助 于 在 for-of 循环 中 使 用 解构 ， 正 如 此 例 : 
let data = new Map(); 


data.set("title", "Understanding ES6"); 
data.set("format", "ebook"); 


// 与 使 用 data.entries() 相同 
for (let [key, value] of data) { 
console.log(key + "=" + value); 


} 


此 代码 中 的 for-of 循环 使 用 了 数组 解构 ， 来 将 Map 中 的 每 个 项 存 入 key 与 value 
变量 。 使 用 这 种 方式 ， 你 能 轻 多 地 同时 处 理 键 与 值 ， 而 无 须 访 问 一 个 双 项 数组 ， 或 是 回 
到 Map 中 去 获取 键 或 值 。 在 Map 上 进行 for-of 循环 时 使 用 数组 解构 ， 能 让 循环 就 像 
处 理 Set 或 数组 那样 方便 。 


字符 串 的 迭代 器 


从 ES5 发 布 开始 ，JS 的 字符 串 就 慢 慢 变 得 越 来 越 像 数 组 。 例 如 ES5 标准 化 了 字符 串 的 方 括 
号 表示 法 ， 用 于 访问 其 中 的 字符 (FP : 使 用 text[6] 来 获取 第 一 个 字符 ， 以 此 类 推 ) 。 不 过 
方 括号 表示 法 工作 在 码 元 而 非 字 符 上 ， 因 此 它 不 能 被 用 于 正确 访问 双 码 元 的 字符 ， 正 如 此 例 
所 演示 的 : 


var message = "A B" ; 


for (let i=0; i < message.length; i++) { 
console.log(message[i]); 


} 


此 代码 使 用 了 方 括号 表示 法 与 length 属性 来 迁 代 字符 囊 并 打印 字符 ， 该 字符 囊 包 合 一 个 
Unicode 字符 ， 输 出 结果 有 点 出 人 意料 : 


A 
(blank) 
(blank) 
(blank) 
(blank) 
B 


iE: (blank) 代表 空 行 。 
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由 于 四 字 节 字符 被 当 作 两 个 分 离 的 码 元 来 对 待 ， 此 处 的 输出 在 A 与 B 之 间 就 有 了 四 个 空 


a 
o 


幸好 ，ES6 FHA Unicode 提供 完全 支持 〈 详 见 第 二 章 ) ， 字 符 串 的 默认 迭代 器 正 是 用 于 解 
决 字符 串 和 迭代 问题 ， 人 和 借助 它 就 能 处 理 字符 而 不 是 码 元 。 将 上 个 范例 修改 为 使 用 字符 串 默 认 和 迭 
代 器 配合 for-of 循环 ， 会 得 到 更 加 合适 的 输出 。 以 下 是 调整 之 后 的 代码 : 


var message = "A B" ; 


for (let c of message) { 
console.log(c); 


} 


此 代码 输出 了 如 下 内 容 : 


A 
(blank) 


(blank) 
B 


作用 对 象 是 字符 ， 让 本 次 的 结果 更 符合 预期 ， 循 环 成 功 地 打印 出 了 这 个 Unicode 字符 以 及 其 
余 字 符 。 


NodeList 的 迭代 器 


文档 对 象 模型 (DOM ) 具有 一 种 NodeList 类 型 ， 用 于 表示 页 面 文档 中 元 素 的 集合 。 对 于 需 
要 书写 在 浏览 器 中 运行 的 JS 代码 的 开发 者 ， 要 理解 NodeList 对 象 与 数组 之 间 的 差异 总 是 稍 
有 困难 。 NodeList 对 象 与 数组 都 使 用 了 length 属性 来 标明 项 的 数量 ， 并 且 都 使 用 方 括号 
表示 法 来 访问 各 个 项 。 然 而 本 质 上 来 说 ， NodeList 与 数组 的 行为 是 非常 不 同 的 ， 这 会 引发 
许多 混乱 。 

随 着 默认 迭代 器 被 加 入 ES6 > DOM 关于 NodeList 的 规定 也 包含 了 一 个 默认 迭代 器 (此 规 


ZE HTML 规范 而 非 ES6 规范 中 ) ， 其 表现 方式 与 数组 的 默认 迭代 器 一 致 。 这 意味 着 你 可 以 
将 NodeList 用 于 for-of 循环 ， 或 用 于 其 他 使 用 对 象 默认 和 帮 代 器 的 场合 。 例 如 : 


var divs = document.getElementsByTagName("div"); 


for (let div of divs) { 
console.log(div.id); 


} 


此 代码 调用 getElement sByTagName( ) 来 获取 一 个 包含 document 对 象 中 的 所 有 <div> TH 
的 NodeList 。 接 下 来 for-of 循环 迭代 了 每 个 元 素 并 打印 出 它们 的 ID ， 实 际 上 这 上 段 代码 与 
在 标准 数组 上 使 用 时 并 无 二 致 。 


扩展 运算 符 与 非 数 组 的 可 迁 代 对 象 
回顾 一 下 第 七 章 ， 可 以 用 扩展 运算 符 ( ..，) 将 一 个 Set 转换 为 数组 ， 例 如 : 


let set = new Set([1, 2, 3, 3, 3, 4, 5]), 
array = [...set]; 


console.log(array); He | 2p Bye, S| 


此 代码 在 数组 字面 量 中 使 用 扩展 运算 符 ， 以 便 将 set 中 的 值 填 充 到 数组 。 扩 展 运 算 符 能 作用 
于 所 有 可 迭代 对 象 ， 并 且 会 使 用 默认 迭代 器 来 判断 需要 使 用 哪些 值 。 所 有 的 值 都 从 迭代 器 中 
被 读 取出 来 ， 并 按 返回 值 的 顺序 插入 数组 。 此 例 工 作 正 常 是 由 于 Set 是 可 迭代 对 象 ， 而 这 种 
方式 同样 还 能 用 于 任意 的 可 选 代 对 象 。 此 处 有 另 一 个 例子 : 


let map = new Map([ ["name", "Nicholas"], ["age", 25]]), 
array = [...map]; 


console.log(array); // {| ["name", "Nicholas"], ["age", 25]] 


此 处 的 扩展 运算 符 将 map 转换 为 一 个 由 数组 构成 的 数组 。 由 于 Map 的 默认 迭代 器 返回 的 是 
键 值 对 ， 最 终 的 数组 看 起 来 与 调用 new Map() 时 所 传 入 的 参数 一 模 一 样 。 


你 能 不 限 次 数 地 在 数组 字面 量 中 使 用 扩展 运算 符 ， 而 且 可 以 在 任意 位 置 用 扩展 运算 符 将 可 选 
代 对 象 的 多 个 项 插入 数组 ， 按 扩展 运算 符 所 在 的 位 置 插 入 新 数组 ， 例 如 


let smallNumbers = [1, 2, 3], 
bigNumbers = [100, 101, 102], 


allNumbers = [0, ...smallNumbers, ...bigNumbers]; 
console.log(allNumbers.length); // 7 
console.log(allNumbers); // (0; 2, 2, 3, L100, 102, 102] 


此 处 的 扩展 运 云 算 算 符 使 用 smallNumbers 与 bigNumbers 中 的 数据 来 创建 allNumbers 数组 。 在 
allNumbers 被 创建 时 ， 值 在 其 中 的 排列 顺序 与 数组 被 添加 的 顺序 一 致 : 首先 是 6 ， 其 次 是 
来 自 smallNumbers 数组 的 元 素 ， 最 后 是 来 自 bigNumbers 数组 的 元 素 。 原 始 数 组 并 没有 被 改 
变 ， 只 是 它们 的 值 被 复制 到 了 allNumbers 数组 中 。 


既然 扩展 运算 符 能 用 在 任意 可 迭代 对 象 上 ， 它 就 成 为 了 将 可 和 迭代 对 象 转换 为 数组 的 最 简单 方 
法 。 你 可 以 将 字符 串 转 换 为 包含 字符 (而 非 码 元 ) 的 数组 ， 也 能 将 浏览 器 中 的 NodeList 对 
象 转换 为 节点 数组 。 


现在 你 已 基本 了 解 和 迭代 器 是 如 何 工作 的 ， 包 括 使 用 for-of 或 扩展 运算 符 的 场合 ， 是 时 候 去 
看 看 迭代 器 的 一 些 更 复杂 用 法 了 。 


迭代 器 高 级 功能 


使 用 移 代 器 的 基本 功能 ， 并 使 用 生成 器 来 方便 地 创建 办 代 器 ， 你 就 已 经 可 以 完成 很 多 工作 
了 。 不 过 ， 除 了 单纯 选 代 集合 的 值 ， 在 其 他 任务 中 和 迭代 器 的 作用 更 强大 。 在 ES6 的 开发 过 程 
中 ， 出 现 了 许多 独特 的 思想 与 模式 ， 激 励 着 规范 制定 者 去 添加 更 多 的 功能 。 这 些 附 加 功能 
能 很 细微 ， 但 将 它们 结合 使 用 就 能 形成 一 些 有 趣 的 交互 。 


传递 参数 给 迭代 器 


本 章 中 的 范例 已 经 展示 了 迁 代 器 能 够 将 值 传递 出 来 ， 通 过 next() 方法 或 者 在 生成 器 中 使 用 
yield 都 可 以 。 但 你 还 能 通过 next() 方法 向 迭代 器 内 传递 参数 。 当 一 个 参数 被 传递 给 
next() 方法 时 ， 该 参数 就 会 成 为 生成 器 内 部 yield 语句 的 值 。 这 种 能 力 对 于 诸如 异步 编程 
之 类 的 高 级 功能 来 说 是 非常 重要 的 。 此 处 有 个 基本 范例 : 


function *createIterator() { 
let first = yield 1; 
let second = yield first + 2; Hip Ob oe 
yield second + 3; if 13) Fe 


oO N 


} 


let iterator = createIterator(); 


console.log(iterator.next()); // *S value: a, done: false i}! 
console.log(iterator.next(4)); // "4 value: 6, done: false pi 
console.log(iterator.next(5)); // “{ value: 8, done: false }" 
console.log(iterator.next()); // “4 value: undefined, done: true ti 


对 于 next() 的 首次 调用 是 一 个 特殊 情况 ， 传 给 它 的 任意 参数 都 会 被 忽略 。 由 于 传递 给 
next() 的 参数 会 成 为 yield 语句 的 值 ， 则 首次 调用 给 next() 提供 的 参数 就 只 会 替换 生成 
器 函数 中 的 第 一 个 yield 语句 ; 但 若 要 在 生成 器 内 部 使 用 该 值 ， 又 要 求 它 在 此 yield 语句 
之 前 就 必须 能 被 访问 到 ， 而 这 是 不 可 能 的 。 因 此 在 首次 调用 next() 时 传递 参数 是 没有 意义 
的 。 


译注 : 译 者 不 赞成 原文 的 说 法 ， 首 次 调用 next() 不 能 传 参 的 原因 应 当 是 一 一 


由 于 传递 给 next() 的 参数 会 成 为 yield 语句 的 值 ， 该 yield 语句 指 的 是 上 次 生成 器 
中 断 执行 处 的 语句 ; 而 next() 方法 第 一 次 被 调用 时 ， 生 成 器 函数 才刚 刚 开 始 执 行 ， 没 
有 所 谓 的 * 上 一 次 中 断 处 的 yield 语句 "可 供 赋值 。 


在 第 二 次 调用 next 时 ， 4 作为 参数 被 传递 进去 ， 这 个 4 最 终 被 赋值 给 了 生成 器 函数 
内 部 的 first 变量 。 在 包 Rar en 
next() 时 被 计算 ， 而 表达 式 左 侧 则 在 第 二 次 调用 next() 方法 时 、 并 在 生成 器 函数 继续 执 
行 前 被 计算 。 由 于 第 二 次 调用 next() AT 4 ， 这 个 值 就 被 赋 给 了 first 变量 ， 之 后 生 
成 器 继续 执行 。 


第 二 个 yield 使 用 了 第 一 个 yield 的 结果 并 加 上 了 2 ， 也 就 是 返回 了 一 个 6 。 当 
next() 被 第 三 次 调用 时 ， 传 入 了 参数 5 。 这 个 值 被 赋 给 了 second 变量， 并 随后 用 在 了 第 
汉人 外 yield 语 名 中， 返回 了 g 。 


通过 cree 函数 内 部 每 次 继续 运行 时 都 执行 了 什么 代码 ， 会 有 助 于 思考 到 底 发 生 了 什 
么 。 示 意图 8-1 用 颜色 演示 了 代码 在 yield 之 前 是 如 何 执 行 的 。 


function *createlterator() { 





let second = 
next(5) yield second + 3; 
} 


示意 图 8-1: 在 一 个 生成 器 内 部 的 代码 执行 
黄色 表示 对 于 next() 的 第 一 次 调用 、 以 及 在 生成 器 内 部 执行 的 代码 ; 水 蓝 色 表示 了 对 
next(4) 的 调用 以 及 随 之 执行 的 代码 ; 而 紫色 则 表示 对 next(5) 的 调用 以 及 随 之 执行 的 代 
其 中 难点 在 于 : 在 左 侧 代码 执行 之 前 ， 右 侧 的 各 个 表达 式 是 如 何 执行 与 停止 的 。 这 使 得 
调试 错综复杂 的 生成 器 要 上 比 调试 正规 函数 更 麻烦 一 些 。 


到 目前 的 范例 已 表明 : 当 一 个 值 传 递 给 next() od Es 的 表现 相似 于 return ° 
然而 ， 在 生成 器 内 部 不 仅 能 使 用 这 样 的 执行 技巧 ， 还 能 让 和 迭代 器 抛 出 一 个 错误 。 


和 迭代 器 中 抛 出 错误 


能 传递 给 迭代 器 的 不 仅 是 数据 ， 还 可 以 是 错误 条 件 。 和 迭代 器 可 以 使 用 一 个 throw) 方法 ， 让 
和 迭代 器 在 恢复 执行 时 抛 出 一 个 错误 。 这 是 对 异步 编程 来 说 很 重要 的 一 个 能 力 ， 同 时 也 会 增加 
生成 器 内 部 的 灵活 度 ， 既 能 模仿 返回 一 个 值 ， 又 能 模仿 抛 出 错误 (这 也 就 是 退出 函数 的 两 种 
方式 ) 。 你 可 以 传递 一 个 错误 对 外 给 throw() 方法 ， 当 和 迭代 器 继续 进行 处 理 时 应 当 抛 出 此 错 
误 。 例 如 : 


function *createIterator() { 
let first = yield 1; 
let second = yield first + 2; // yield 4 + 2 ， 然 后 抛 出 错误 
yield second + 3; // 永 不 会 被 执行 


} 


let iterator = createIterator(); 


console.log(iterator.next()); // "{ value: 1, done: false }" 
console.log(iterator.next(4)); J) SA VALUE omnes alse. 


在 本 例 中 ， 前 两 个 yield 表达 式 被 照常 运算 ， 但 当 throw) 被 调用 时 ， 一 个 错误 在 let 
second 运算 之 前 就 被 抛 出 了 。 这 有 效 停止 了 代码 执行 ， 类 似 于 直接 抛 出 错误 ， 其 中 唯一 区 别 
是 错误 在 何 处 被 抛 出 。 示 意图 8-2 演示 了 每 一 步 所 执行 的 是 什么 代码 。 


function *createlterator() { 





let secondliiyield first +2; 


throw(new Error()); yield second + 3; 


} 


示意 图 8-2: 在 一 个 生成 器 内 部 抛 出 错误 
在 此 示意 图 中 ， 红 色 表 示 当 throw() 被 调用 时 所 执行 的 代码 ， 红 星 说 明了 错误 在 生成 器 内 部 
大 约 何 时 被 抛 出 。 前 两 个 yield 语句 被 执行 之 后 ， 当 调用 throw) 时 ， 在 任何 其 他 代码 执 
行 之 前 错误 就 被 抛 出 了 。 





了 解 这 些 之 后 ， 你 就 可 以 在 生成 器 内 部 使 用 一 个 try-catch 块 来 捕捉 这 种 错误 : 


function *createIterator() { 
let first = yield 1; 
let second; 


try { 

second = yield first + 2; // yield 4 + 2 ， 然 后 抛 出 错误 
} catch (ex) { 

second = 6; // 当 出 错时 ， 给 变量 另外 赋值 
} 


yield second + 3; 


} 


let iterator = createIterator(); 


console.log(iterator.next()); // "{ value: 1, done: false }¥ 
console.log(iterator.next(4)); // “4 Nalue: 6, done: talse pv 
console.log(iterator.throw(new Error("Boom"))); // "{ value: 9, done: false }" 
console.log(iterator.next()); {value undetuned done ere 


本 例 使 用 一 个 try-catch 块 RTRA yield 7&4] ° 尽管 这 个 yield 自 身 的 执行 不 会 出 
错 ， 但 在 对 second 变量 赋值 之 前 ， 错 误 就 在 此 时 被 抛 出 ， 于 是 catch 部 分 捕捉 错误 并 将 这 
个 变量 赋值 为 6 ， 然 后 再 继续 执行 到 下 一 个 yield 处 并 返回 了 9 ° 


要 注意 一 件 有 趣 的 事情 发 生 了 : throw() 方法 就 像 next 方法 一 样 返 回 了 一 个 结果 对 象 。 
由 于 错误 在 生成 器 内 部 被 捕捉 ， 代 码 继 续 执 行 到 下 一 个 yield 处 并 返回 了 下 一 个 值 ， 也 就 是 


9 o 


将 next() 与 throw() 都 当 作 和 迭代 器 的 指令 ， 会 有 助 于 思考 。 d Y RITRARRE? 
执行 (可 能 会 带 着 给 定 的 值 ) ， 而 throw() DAMA TRAA WH pa h a ATR E a. 
在 调用 点 之 后 会 发 生 什么 ， 根 据 生成 器 内 部 的 代码 来 决定 。 


next() 与 throw() 方法 控制 着 迭代 器 在 使 用 yield 时 内 部 的 执行 ， 但 你 也 可 以 使 用 
return 语句 2 不 过 return 的 工作 方式 与 EC EM BRP AEH ? 正如 你 将 在 下 一 节 
中 看 到 的 那样 。 


生成 器 的 Return 7 4 


由 于 生成 器 是 函数 ， 你 可 以 在 它 内 部 使 用 return 语句 ， 既 可 以 让 生成 器 早 一 点 退出 执行 ， 
也 可 以 指定 在 next() 方法 最 后 一 次 调用 时 的 返回 值 。 在 本 章 大 多 数 例子 中 ， 对 和 迭代 器 上 的 
next() 的 最 后 一 次 调用 都 返回 了 undefined ， 但 你 还 可 以 像 在 其 他 函数 中 那样 ， 使 用 
return 来 指定 另 一 个 返回 值 。 在 生成 器 内 ， return 表明 所 有 的 处 理 已 完成 ， 因 此 done 
属性 会 被 设 为 true ， 而 如 果 提 供 了 返回 值 ， 就 会 被 用 于 value 字段 。 此 处 有 个 例子 ， 单 
纯 使 用 return 让 生成 器 更 早 返 回 


function *createIterator() { 
yield 1; 
return, 
yield 2; 
yield 3; 


let iterator = createIterator(); 


console.log(iterator.next()); // *{ value: a, done: false 3}! 
console.log(iterator.next()); // *{ value: undefined, done: true hh 
此 代码 中 的 生成 器 在 一 个 yield 语句 后 跟随 了 return 语句 。 这 个 return 表明 将 不 


会 再 有 更 多 值 可 用 ， 之 后 的 yield a eo (它们 是 不 可 到 达 的 ) 。 


你 也 可 以 指定 一 个 返回 值 ， 会 被 用 于 最 终 返回 的 结果 对 象 中 的 value 字段 。 例 如 : 


function *createIterator() { 
yield 1; 
return 42; 


let iterator = createIterator(); 


console.log(iterator.next()); // "“{ value: a, done: false ma 
console.log(iterator.next()); V i wales 42, ‘done: tnue }! 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


此 处 ， 当 第 二 次 调用 next() 方法 时 ， 值 42 被 返回 在 value FAP? ILA done 字段 的 
值 才 第 一 次 变 为 了 true 。 第 三 次 调用 next() 返回 了 一 个 对 象 ， 其 value 属性 再 次 变 回 
undefined ， 你 在 return 语句 中 指定 的 任意 值 都 只 会 在 结果 对 象 中 出 现 一 次 ， 此 后 value 
字段 就 会 被 重 置 为 ”undefined ° 


扩展 运算 符 与 for-of 循环 会 忽略 return 语句 所 指定 的 任意 值 。 一 旦 它们 看 到 done 
的 值 为 true ， 它 们 就 会 停止 操作 而 不 会 读 取 对 应 的 value 值 。 不 过 ， 在 生成 器 进行 
委托 时 ， 和 迭代 器 的 返回 值 会 非常 有 用 。 


在 某 些 情况 下 ， 将 两 个 迭代 器 的 值 合并 在 一 起 会 更 有 用 。 生 成 器 可 以 用 星 号 ( * ) 配合 
yield 这 一 特殊 形式 来 委托 其 他 的 迭代 器 。 正 如 生成 器 的 定义 ， 星 号 出 现在 何 处 是 不 重要 
的 ， 只 要 落 在 yield 关键 字 与 生成 器 函数 名 之 间 即 可 。 此 处 有 个 范例 : 


function *createNumberIterator() { 
yield 1; 
yield 2; 


function *createColorIterator() { 
yield “redt; 
yield "green"; 


function *createCombinedIterator() { 
yield *createNumberIterator(); 
yield *createColorIterator(); 
yield true; 


var iterator = createCombinedIterator(); 








console.log(iterator.next()); // “i value: a, done: false yi 
console.log(iterator.next()); // "{ value: 2, done: false }" 
console.log(iterator.next()); V valuen red done: false}! 
console.log(iterator.next()); ji MX Nalues green, done: false) tu 
console.log(iterator.next()); // “{ vallue: true, done: false }" 
console.log(iterator.next()); // "{ value: undefined, done: true }" 


此 例 中 的 createCombinedIterator() 生成 器 依次 委托 了 createnumberIterator() 与 

createColorIterator() 。 返 回 的 迭代 器 从 外 部 看 来 就 是 一 个 单一 的 迭代 器 ， 用 于 产生 所 有 的 
值 。 每 次 对 next() 的 调用 都 会 委托 给 合适 的 生成 器 ， 直 到 使 用 createNumberIterator() 与 
createColoriterator() 创建 的 迭代 器 全 部 清空 为 止 。 然 后 最 后 一 条 yield 语句 会 被 执行 以 


返回 true ° 


生成 器 委托 也 能 让 你 进一步 cecal 返回 值 。 这 是 访问 这 些 返回 值 的 最 简单 方式 ， 并 且 
在 执行 复杂 任务 时 会 非常 有 用 。 例 如 


function *createNumberIterator() { 
yield 1; 
yield 2; 
recurn s, 


function *createRepeatingIterator(count) { 
for (let 1=0; 1 < count; i++) { 
yield "repeat"; 


function *createCombinedIterator() { 
let result = yield *createNumberIterator(); 
yield *createRepeatingIterator(result); 


var iterator = createCombinedIterator(); 








console.log(iterator.next()); // "{ value: 1, done: false }" 
console.log(iterator.next()); A “4 Nalue: 2, done: false }! 
console.log(iterator.next()); // *{ value: “repeat, done: false ki 
console.log(iterator.next()); // “{ value: “repeat”, done: false mi 
console.log(iterator.next()); 7/7 “i values repeat donen false iu 
console.log(iterator.next()); vs valuemundefinedem dones true ma 


此 处 createcombinedIterator() 生成 器 委托 了 createNumberIterator() 并 将 它 的 返回 值 赋值 
给 了 result 变量 。 由 于 createNumberIterator() 包含 return 3 语句 ， 该 返回 值 就 是 3 
° result 变量 接 下 来 会 作为 参数 传递 给 createRepeatingIterator() 生成 器 ， 指 示 同 一 个 字 


符 串 需要 被 重复 几 次 (在 本 例 中 是 三 次 ) 。 


注意 值 3 从 未 在 对 于 next() 方法 的 任何 调用 中 被 输出 。 当 前 它 仅 仅 存 在 于 
createCombinedIterator() 生成 器 内 部 。 但 你 也 可 以 通过 添加 另 一 个 yield 语句 来 输出 这 个 
值 ， 正 如 : 


function *createNumberIterator() { 
yield 1; 
yield 2; 
recurn s, 


function *createRepeatingIterator(count) { 
for (let 1=0; 1 < count; i++) { 
yield "repeat"; 


function *createCombinedIterator() { 
let result = yield *createNumberIterator(); 
yield result; 
yield *createRepeatingIterator(result); 


var iterator = createCombinedIterator(); 





console.log(iterator.next()); // *\ value: 1, done: false }" 
console.log(iterator.next()); valve 2; done: false} 
console.log(iterator.next()); // “4 value: 3, done: false }v 
console.log(iterator.next()); M “i valuex repeat dones false 4 
console.log(iterator.next()); // “i values “repeat, done: false ms 
console.log(iterator.next()); // *S value: “repeat, done: false mi 
console.log(iterator.next()); // “{ value: undefined, done: true pi 





在 此 代码 中 ， 额 外 的 yield 语句 明确 地 将 createNumberIterator() 生成 器 的 返回 值 进行 了 
输出 。 


使 用 返回 值 的 生成 器 委托 是 一 种 非常 强大 的 范式 ， 能 引出 一 些 非常 有 趣 的 应 用 场景 ， 尤 其 是 
在 与 异步 操作 结合 时 。 


你 可 以 直接 在 字符 串 上 使 用 yield * (例如 yield * "hello" ) ， 字 符 串 的 默认 迭代 器 
会 被 使 用 。 
异步 任务 运行 


围绕 着 生成 器 的 许多 兴奋 点 都 与 异步 编程 直接 相关 。 JS 中 的 异步 编程 是 一 把 双 刃 剑 : 简单 任 
务 很 容易 用 异步 实现 ， 但 复杂 任务 就 会 给 代码 组 织带 来 痛苦 。 由 于 生成 器 能 在 执行 过 程 中 有 
效 地 暂停 代码 操作 ， 它 就 给 异步 编程 带 来 了 许多 可 能 性 。 


执行 异步 操作 的 传统 方式 是 调用 一 个 包含 回调 的 函数 。 例 如 ， 考 虑 在 Node.js 中 从 磁盘 读 取 
一 个 文件 : 


let fs = require("fs"); 


fs.readFile("config.json", function(err, contents) { 
if (err) { 
throw err; 


doSomethingwith(contents); 
console.log("Done"); 


3); 


能 使 用 文件 名 与 一 个 回调 函数 去 调用 fs.readFile() 方法 ， 在 读 取 操 作 结 束 之 后 ， 回 调 函 数 
就 会 被 调用 。 此 回调 函数 查看 是 否 存 在 错误 ， 无 错误 时 处 理 返 回 的 contents 数据 。 当 你 需 
要 完成 的 任务 很 少时 ， 这 么 做 很 有 效 ; 然而 当 你 需要 嵌 套 回调 沟 数 ， 或 者 要 按 顺 序 处 理 一 系 
列 的 异步 任务 时 ， 此 方式 就 会 非常 麻烦 。 在 这 种 场合 下 ， 生 成 器 与 yield 会 带 来 帮助 。 


个 简单 的 任务 运行 器 


加 yield 能 停止 运行 ， 并 在 重新 开始 运行 前 等 待 next() 方法 被 调用 ， 你 就 可 以 在 没有 回 
调 函 数 的 情况 下 实现 异步 调用 。 首 先 ， 你 个 能 够 调用 生成 器 并 启动 迭代 器 的 函数 ， 就 
像 这 样 : 


function run(taskDef) { 


// 创建 近代 器 ， 让 它 在 别处 可 用 
let task = taskDef(); 


// 启动 任务 
let result = task.next(); 


// 递归 使 用 函数 来 保持 对 next() 的 调用 
function step() { 


// 如 果 还 有 更 多 要 做 的 
If (!result.done) { 
result = task.next(); 





step(); 
} 
} 
// 开始 处 理 过 程 
step(); 


run() BARZ- MEZEL (BP-+ERMS BR) 作为 参数 ， 它 会 调用 生成 器 来 创建 一 个 
Au hmm es ean ee 
内 的 其 他 函数 访问 到 。 第 一 次 对 next() 的 调用 启动 了 迭代 器 ， 并 将 结果 存储 下 来 以 便 稍 后 
使 用 。 step() BREA result.done 的 值 ， 如果 为 false J 归 调 用 自身 之 前 调用 
next() 方法 。 每 次 调用 next() 都 会 把 返回 的 双 告 果 保存 在 result 变量 上 ， 它 总 是 会 被 最 
新 的 信息 所 重 写 。 对 于 step() 的 初始 调用 启动 了 处 理 过 程 ， 该 过 程 会 查看 result.done 来 
判断 是 否 还 有 更 多 的 工作 要 做 。 


配合 这 个 已 实现 的 run() 函数 ， 你 就 可 以 运行 一 个 包含 多 条 ”yield 语句 的 生成 器 ， 就 像 这 
样 : 


run(function*() { 
console.log(1); 
yield; 
console.log(2); 
yield; 
console.log(3); 
}); 


此 例 只 是 将 三 个 数值 输出 到 控制 台 ， 单 纯 用 于 表明 对 next() wien 已 被 执行 。 然 
而 ， 仅 仅 使 用 几 次 yield ITA EN: ， 下 一 步 是 要 把 值 传 进 器 并 获取 返回 数据 。 


带 数 据 的 任务 运行 


传递 数据 给 任务 运行 器 最 简单 的 方式 ， 就 是 把 yield 返回 的 值 传 入 下 一 次 的 next() 调用 。 
为 此 ， 你 仅 需 传递 result.value ， 正 如 以 下 代码 : 


function run(taskDef) { 


// 创建 迭代 器 ， 让 它 在 别处 可 用 
let task = taskDef(); 


// 局 动 任务 
let result = task.next(); 


// 递归 使 用 函数 来 保持 对 next() 的 调用 
function step() { 


// 如 果 还 有 更 多 要 做 的 
if (!result.done) { 
result = task.next(result.value); 


step(); 


// 开始 处 理 过 程 
step(); 


现在 result.value 作为 参数 被 传递 给 了 next() ? 这 样 就 能 在 yield 调用 之 间 传 递 数 据 
了 ， 就 像 这 样 : 


run(function*() { 
let value = yield 1; 
console.log(value) ; Hf al 


value = yield value + 3; 
console.log(value); // 4 


3); 


此 例 向 控制 台 输 出 了 两 个 值 : 1 与 4。 数 值 1 由 yield 1 语句 而 来 ， 随 之 1 又 被 传 回 给 了 
value 变量 。 数 值 4 是 在 value 上 加 了 3 的 结果 ， 并 将 运算 结果 再 度 典 值 给 value 。 现 
在 数据 在 对 yield 的 调用 之 间 流 动 了 起 来 ， 仅 需 再 来 个 微小 改动 ， 就 能 支持 异步 调用 。 


异步 任务 运行 器 


上 个 例子 只 是 在 yield 之 间 来 回 传递 静态 数据 ， 但 等 待 一 个 异步 处 理 与 此 稍微 有 点 差异 。 任 
务 运行 器 需要 了 解 回调 函数 ， 并 了 解 如 何 使 用 它们 。 并 且 由 于 yield 表达 式 将 它们 的 值 传递 
给 了 任务 运行 器 ， 这 就 意味 着 任意 函数 调用 都 必须 返回 一 个 值 ， 并 以 某 种 方式 标明 该 返回 值 
是 个 异步 操作 调用 ， 而 任务 运行 器 应 当 等 待 此 操作 。 


此 处 是 将 返回 值 标明 为 异步 操作 的 一 种 方法 : 


function fetchData() { 
return function(callback) { 
callback(null, "Hi!"); 
}; 


此 例 的 目的 是 : 任何 打算 让 任务 运行 器 调用 的 函数 ， 都 应 当 返 回 一 个 能 够 执行 回调 函数 的 函 
数 。 fetchpata() 罗 数 所 返回 的 函数 能 接受 一 个 回调 函数 作为 其 参数 ， 当 返回 的 函数 被 调用 
N ， 它 会 执行 回调 函数 并 附加 一 pues (BP nHil" FAB) 。 该 回调 函数 需要 由 任务 运 

行 器 提供 ， 以 确保 回调 函数 能 与 当前 的 迭代 器 正确 交互 。 虽 然 we 函数 是 同步 的 ， 
es oe a rT 


function fetchData() 4 
return function(callback) { 
setTimeout(function() { 
callback(null, "Hi!"); 
}, 50); 
J; 


此 版 本 的 fetchData() 在 调用 回调 函数 之 前 引入 了 50 毫秒 的 延迟 3 说 明 此 模式 在 同 WM HF 
步 代 码 上 都 能 同样 良好 运作 。 你 只 要 保证 每 个 需要 被 yield 调用 的 函数 都 遵循 此 模式 。 


T le We 
$o RE result.value 是 一 个 函数 ， 任 务 运 行 器 就 应 当 执 行 它 ， 而 不 是 仅仅 将 它 传递 
next() 方法 。 此 处 有 更 新 后 的 代码 : 


aaa 


function run(taskDef) { 


// 创建 选 代 器 ， 让 它 在 别处 可 用 
let task = taskDef(); 


// 局 动 任务 
let result = task.next(); 


// ŽA BARR next() 的 调用 
function step() { 


// 如 果 还 有 更 多 要 做 的 
If (!result.done) { 
if (typeof result.value === "function") { 
result.value(function(err, data) { 
if (err) { 
result = task.throw(err); 
return, 
} 
result = task.next(data); 
step(); 
}); 
} else { 
result = task.next(result.value); 
step(); 
} 
} 
} 
// 开始 处 理 过 迁 
step(); 


使 用 === 运算 符 判断 出 result.value 是 个 函数 时 ， 将 一 个 回调 函数 作为 参数 去 调用 它 。 该 
回调 函数 遵循 了 Node.js 的 惯例 ， 将 任何 潜在 错误 作为 第 一 个 参数 err ) 传 入 ， 而 处 理 结 
果 则 作为 第 二 个 参数 。 若 err 非 空 ， 也 就 表示 有 错误 发 生 ， 需 要 使 用 该 错误 对 象 去 调用 
task.throw() ， 而 不 是 调用 task.next() ， 这 样 错 误 就 会 在 恰当 的 位 置 被 抛 出 ; 若 不 存在 
着 误 ， data 参数 将 会 被 传 入 task.next() ? 而 其 调用 结果 也 会 被 保存 下 来 。 接 下 来 ， 调 用 
step() 来 继续 处 理 过 程 。 若 result.value 并 非 骂 数 ， 它 就 会 被 直接 传递 给 next() 方法 。 


这 个 新 版 任务 运行 器 已 经 为 所 有 的 异步 任务 准备 好 了 。 为 了 在 Node.js 中 从 一 个 文件 读 取 数 


据 ， 你 需要 创建 对 于 fs.readFile() 的 一 个 封装 ， 它 类 似 于 本 节 起 始 处 的 fetchpata() $ 
数 ， 能 返回 另 一 个 函数 。 例 如 : 


tet fts = Kequine( is.) 


function readFile(filename) { 
return function(callback) { 
fs.readFile(filename, callback); 


yi 


这 个 readFile() 方法 接受 单个 参数 ， 即 文件 名 ， 并 返回 一 个 能 执行 回调 函数 的 函数 。 此 回 
调 函 数 会 被 直接 传递 给 fs.readFile() 方法 ， 后 者 会 在 操作 完成 后 执行 回调 。 接 下 来 你 就 可 
以 使 用 yield 来 运行 这 个 任务 ， 如 下 : 


run(function*() { 
let contents = yield readFile("config.json"); 
doSomethingwWith(contents) ; 
console.log("Done"); 


3); 


此 例 执 行 了 异步 的 readFile() 操作 ， 而 在 主要 代码 中 并 未 暴露 出 任何 回调 函数 。 除 了 
yield 之 外 ， 此 代码 看 起 来 与 同步 代码 并 无 二 致 。 既 然 执行 异步 操作 的 函数 都 遵循 了 同一 接 
口 ， 你 就 可 以 用 貌似 同步 的 代码 来 书写 处 理 逻 辑 。 

当然 ， 这 些 范例 中 所 使 用 的 模式 也 有 缺点 : 你 无 法 完全 确认 一 个 能 返回 函数 的 函数 是 异步 

的 。 但 现在 唯一 重要 的 是 让 你 理解 任务 运行 背后 的 原理 。 promise 提供 了 更 强 有 力 的 方式 来 
调度 异步 任务 ， 第 十 一 章 会 进一步 介绍 这 个 主题 。 


x 
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迭代 器 是 ES6 重要 的 一 部 分 ， 并 且 也 是 语言 若干 关键 元 素 的 依赖 。 表 面 上 看 ， 和 迭代 器 只 是 提 
供 了 一 种 使 用 简单 接口 来 返回 值 序列 的 简单 方式 。 然 而 ， 在 ES6 中 使 用 迭代 器 ， 还 有 着 种 种 
更 加 复杂 的 方式 。 


Symbol.iterator 符号 被 用 于 定义 对 象 的 默认 迭代 器 。 内 置 对 象 与 开发 者 自 定义 对 象 都 可 以 使 
用 这 个 符号 ， 以 提供 一 个 能 返回 迭代 器 的 方法 。 当 一 个 对 象 具有 symbol.iterator 时 ， 它 就 
会 被 认为 是 可 和 迭代 对 象 。 


for-of 循环 在 循环 中 使 用 可 和 迭代 对 象 来 返回 一 系列 数据 。 与 使 用 传统 for 循环 进行 迭代 相 
比 ， 使 用 for-of 要 容易 得 多 ? 因为 你 不 再 需要 追踪 计数 器 并 控制 循环 何 时 结 ° for-of 
循环 会 自动 从 迭代 器 中 读 取 所 有 数据 ， 直 到 没有 更 多 数据 为 止 ， 然 后 退出 循环 。 


为 了 让 for-of 更 易 使 用 ，ES6 中 的 许多 类 型 都 具有 默认 的 迭代 器 。 所 有 的 集合 类 型 (也 就 
是 数组 、Map 与 Set) 都 具有 迫 代 器 ， 让 它们 的 内 容 更 易 被 访问 。 字 符 串 同样 具有 一 个 默认 
迭代 器 ， 能 更 加 轻易 地 迭代 字符 串 中 的 字符 (而 非 码 元 ) © 


扩展 运算 符 能 操作 任意 的 可 迭代 对 象 ， 同 时 也 能 从 一 个 近代 器 中 依次 读 取 数 据 ， 更 简单 地 将 
其 转换 为 数组 。 


生成 器 是 一 个 特殊 的 函数 ， 可 以 在 被 调用 时 自动 创建 一 个 迭代 器 。 生 成 器 的 定义 用 一 个 星 号 
( = ) 来 表示 ， 使 用 yield 关键 字 能 指明 在 每 次 成 功 的 next() 方法 调用 时 应 当 返 回 什 么 
值 。 


生成 器 委托 促进 ey i et tty, P 中 。 
通过 调用 yield * 而 非 yield ， 你 就 能 把 已 有 生成 器 用 在 其 他 生成 器 这 种 处 理 方式 
能 将 多 个 迭代 器 的 返回 值 合并 到 新 迭代 器 上 。 


生成 器 与 迭代 器 最 有 趣 、 最 令 人 激动 的 方面 ， 或 许 就 是 能 创建 外 观 清晰 的 异步 操作 代码 。 你 
不 必 到 处 使 用 回调 函数 ， 而 是 可 以 建立 貌似 同步 的 代码 ， 但 实际 上 却 使 用 yield 来 等 待 异 步 


第 九 章 JS 的 类 


与 大 多 数 正 规 的 面向 对 象 编 程 语 言 不 同 ，JS 从 创建 之 初 就 不 支持 类 ， 也 没有 把 类 继承 作为 定 
义 相 似 对 象 以 及 关联 对 象 的 主要 方式 ， 这 让 不 少 开 发 者 感到 困惑 。 而 从 ES1 诞生 之 前 直到 
ES5 时 期 ， 很 多 库 都 创建 了 一 些 工 具 ， 使 JS 看 起 来 仿佛 能 支持 类 。 尽 管 一 些 JS 开发 者 强烈 
认为 这 门 语 言 不 需要 类 ， 但 为 处 理 类 而 创建 的 代码 库 如 此 之 多 ， 导 致 ES6 最 终 引 入 了 类 。 


在 探索 ES6 的 类 的 过 程 中 ， 理 解 类 的 潜在 机 制 会 很 有 帮助 ， 因 此 本 章 将 会 首先 讨论 ES5 的 开 
发 者 如 何 实现 对 类 行为 的 模仿 。 然 而 正如 你 将 在 后 面 看 到 的 ， ES6 的 类 并 不 与 其 他 语言 的 类 
完全 相同 ， 所 具备 的 独特 性 正 配合 了 JS 的 动态 本 质 。 


。 ES5 中 的 仿 类 结构 
e 类 的 声明 
o 基本 的 类 声明 
o 为 何 要 使 用 类 的 语法 
e 类 表达 式 
o 基本 的 类 表达 式 
o 具名 类 表达 式 
e 作为 一 等 公民 的 类 
e 访问 器 属性 
。 可 计算 的 成 员 名 
© 生成 器 方法 
e 静态 成 员 
o 使 用 派生 类 进行 继承 
o 屏蔽 类 方法 
o 继承 静态 成 员 
o 从 表达 式 中 派生 类 
o 继承 内 置 对 象 
o Symbol.species 属性 
© 在 类 构造 器 中 使 用 new.target 


总: 二 


ew 


ES5 中 的 仿 类 结构 


JS 在 ES5 及 更 早 版 本 中 都 不 存在 类 。 与 类 最 接近 的 是 : 创建 一 个 构造 器 ， 然 后 将 方法 指派 到 
该 构造 器 的 原型 上 。 这 种 方式 通常 被 称 为 创建 一 个 自 定义 类 型 。 例 如 : 


function PersonType(name) { 
this.name = name; 


PersonType.prototype.sayName = function() { 
console.log(this.name); 


}; 


let person = new PersonType("Nicholas"); 
person.sayName(); // 输出 "Nicholas" 


console.log(person instanceof PersonType); // true 
console.log(person instanceof Object); 7/ true 


此 代码 中 的 personType 是 一 个 构造 器 函数 ， 并 创建 了 单个 属性 name 。 sayName() 方法 被 
指派 到 原型 上 ， 因 此 在 persontype 对 象 的 所 有 实例 上 都 共享 了 此 方法 。 接 下 来 ， 使 用 new 
运算 符 创建 了 personType 的 一 个 新 实例 person ， 此 对 象 能 被 判定 是 通过 原型 而 继承 了 
PersonType 与 Object 的 实例 。 


这 种 基本 模式 在 许多 对 类 进行 模拟 的 JS 库 中 都 存在 ， 而 这 也 是 ES6 类 的 出 发 点 。 
类 的 声明 
类 在 ES6 中 最 简单 的 形式 就 是 类 声明 ， 它 看 起 来 很 像 其 他 语言 中 的 类 。 


基本 的 类 声明 


类 声明 以 class 关键 字 开 始 ， 其 后 是 类 的 名 称 ; 剩余 部 分 的 语法 看 起 来 就 像 对 象 字 面 量 中 的 
方法 简写 ， 并 且 在 方法 之 间 不 需要 使 用 去 号 。 作 为 范例 ， 此 处 有 个 简单 的 类 声明 : 


class PersonClass { 


// 等 价 于 PersonType 构造 器 
constructor(name) { 
this.name = name; 


// 等 价 于 PersonType. prototype. sayName 
sayName() { 
console.log(this.name); 


let person = new PersonClass("Nicholas"); 
person.sayName();  // 输出 "Nicholas" 


console.log(person instanceof PersonClass); // true 
console.log(person instanceof Object); EEUE 
console.log(typeof PersonClass); AUN CELON 


console.log(typeof PersonClass.prototype.sayName); // "function" 


这 个 personclass 类 声明 的 行为 非常 类 似 上 个 例子 中 的 personType ° RFA 
使 用 特殊 的 constructor 方法 名 称 直接 定义 一 个 构造 器 ， 而 不 需要 先 定义 一 个 函数 再 把 它 
作 构 造 器 使 用 。 由 于 类 的 方法 使 用 了 简写 语法 ， 于 是 就 不 再 需要 使 用 function 关键 字 。 
constructor 之 外 的 方法 名 称 则 没有 特别 的 含义 ， 因 此 可 以 随 你 高 兴 自 由 添加 方法 。 


自 有 属性 ( Own properties ) : 该 属性 出 现在 实例 上 而 不 是 原型 etn 
器 或 方法 内 部 进行 创建 。 在 本 例 中 ， name 就 是 一 个 自 有 属性 。 我 建议 应 在 构造 器 函数 
内 创建 所 有 可 能 出 现 的 自 有 属性 ， 这 样 在 类 中 声明 变量 就 会 被 限制 在 单一 位 置 (有 助 于 
代码 检查 ) 。 


有 趣 的 是 ， 相 对 于 已 有 的 自 定义 类 型 声明 方式 来 说 ， 类 声明 仅仅 是 以 它 为 基础 的 一 个 语法 
糖 。 personclass 声明 实际 上 创建 了 一 个 拥有 constructor 方法 及 其 行为 的 函数 ， 这 也 是 
typeof PersonClass 会 得 到 "function" 结果 的 原因 。 此 例 中 的 sayName() 方法 最 终 也 成 为 
PersonClass.prototype 上 的 一 个 方法 ， 类 似 于 上 个 例子 中 | 与 
PersonType.prototype 之 间 的 关系 。 这 些 相 似 处 允许 你 把 自 定义 类 型 与 类 混合 使 用 ， 而 不 必 
被 具体 的 用 法 困扰 。 


为 何 要 使 用 类 的 语法 


尽管 类 与 自 定义 类 型 之 间 有 相似 性 ， 但 仍然 要 记 住 一 些 重要 的 区 别 : 


1. 类 声明 不 会 被 提升 ， 这 与 函数 定义 不 同 。 类 声明 的 行为 与 let 相似 ， 因 此 在 程序 执行 到 
声明 处 之 前 ， 类 都 会 位 于 暂时 性 死 区 内 。 
2， 类 声明 中 的 所 有 代码 会 自动 运行 并 锁定 在 严格 模式 下 。 


wo 


类 的 所 有 方法 都 是 不 可 枚 举 的 ， 这 是 对 于 自 定义 类 型 的 显著 变化 ， 后 者 必须 用 
Object.defineProperty() 才能 将 方法 改变 为 不 可 枚 举 。 

4. 类 的 所 有 方法 内 部 都 没有 [[construct]] ， 因 此 使 用 new 来 调用 它们 会 抛 出 错误 。 
5 调用 类 构造 器 时 不 使 用 new ， 会 抛 出 错误 。 

6. 试图 在 类 的 方法 内 部 重 写 类 名 ， 会 抛 出 错误 。 


这 样 看 来 ， 上 例 中 的 personclass 声明 实际 上 就 直接 等 价 于 以 下 未 使 用 类 语法 的 代码 : 


// 直接 等 价 于 PersonClass 
let PersonType2 = (function() { 


"use strict"; 
const PersonType2 = function(name) { 


// BD BABA ARIAT new 
if (typeof new.target === "undefined") { 
throw new Error("Constructor must be called with new."); 


this.name = name; 


Object.defineProperty(PersonType2.prototype, "sayName", { 
value: function() { 


// HA BARAA eA EA new 
if (typeof new.target !== "undefined") { 
throw new Error("Method cannot be called with new."); 


console.log(this.name) ; 


}, 

enumerable: false, 
writable: true, 
configurable: true 


3); 


return PersonType2; 


}()); 


首先 要 注意 这 里 有 两 个 personType2 声明 :一 个 在 外 部 作用 域 的 let 声明 ， 一 个 在 IIFE 内 
部 的 const 声明 。 这 说 明了 为 何 类 名 不 能 在 类 的 方法 内 被 重 写 ， 而 允许 在 外 部 重 写 。 构 造 器 
函数 检查 了 new.target ， 以 保证 是 使 用 new 进行 调用 的 ， 否 则 就 抛 出 错误 。 接 下 来 ， 
sayName() 方法 被 定义 为 不 可 枚 举 ， 并 且 此 方法 也 检查 了 new.target ， 它 则 要 保证 在 被 调 
用 时 没有 使 用 new 。 最 后 一 步 是 将 构造 器 函数 返回 出 去 。 


此 例 说 明了 不 使 用 新 语法 也 能 实现 类 的 任何 特性 ， 不 过 类 语法 显著 简化 了 所 有 功能 的 代码 。 


不 变 的 类 名 


只 有 在 类 的 内 部 ， 类 名 才 被 视 为 是 使 用 const 声明 的 。 


名 ， 但 不 能 在 类 的 方法 内 部 这 么 做 。 例 如 : 


class Foo { 
constructor() { 
Foo) = “bars // 执行 时 抛 出 错误 
y 


// 但 在 类 声明 之 后 没 问题 
Foo = "baz"; 


意味 着 你 可 以 在 外 部 重 


在 此 代码 中 ? soar a Foo 与 在 类 外 部 的 Foo we A FP] A Ro 内 部 的 Foo 就 
像 是 用 const 定义 的 ， EE 被 重 写 ， 当 构造 器 尝试 使 用 任何 值 重 写 


错误 。 但 由 于 外 部 的 Foo pp let 声明 的 ， 你 可 以 随时 重 写 类 名 


类 表达 式 


类 与 函数 相似 之 处 在 于 都 有 两 种 形式 : 声明 与 表达 式 。 函 数 声 明 与 类 声明 都 以 适当 的 关键 词 
为 起 始 (PH function 与 class ) ， 随 后 是 标识 符 〈 即 函数 名 或 类 名 ) 
表达 式 形式 ， 无 须 在 function 后 面 使 用 标识 符 ; 类 似 的 ， 类 也 有 不 需要 标识 符 


式 。 类 表达 式 被 设计 用 于 变量 声明 ， 或 可 作为 参数 传递 给 函数 。 


基本 的 类 表达 式 


此 处 是 与 上 例 中 的 personclass 等 效 的 类 表达 式 ， 随 后 


的 代码 使 用 了 它 


Foo 时 ， 都 会 抛 出 


。 HRA AP 


FH RANG 


- 
Q 


let PersonClass = class { 


i 


// 等 价 于 PersonType 构造 器 
constructor(name) { 
this.name = name; 


// 等 价 于 PersonType.prototype.sayName 
sayName() { 
console.log(this.name) ; 


let person = new PersonClass("Nicholas"); 
person. sayName(); // 输出 "Nicholas" 


console.log(person instanceof PersonClass); 


console.log(person instanceof Object); 


console.log(typeof PersonClass); 


正如 此 例 所 示 ， 类 表达 


功能 等 价 于 类 声明 。 


使 用 类 声明 还 是 类 表达 式 ， 主 要 是 代码 风格 问题 。 相 对 于 
区 别 ， 类 声明 与 类 表达 式 都 不 会 被 提升 ， 因 此 对 代码 运行 


具名 类 表达 式 


节 的 示例 使 用 了 一 个 匿名 的 类 表达 式 ， 不 过 


// true 
// true 


/NA 人 ERUN E TONA 


console.log(typeof PersonClass.prototype.sayName); // "function" 


才 就 像 函 数 表达 


命名 。 为 此 需要 在 class 关键 字 后 添加 标识 符 ， 就 像 这 样 


let PersonClass = class PersonClass2 { 


}; 


// 等 价 于 PersonType 构造 器 
constructor(name) { 
this.name = name; 


// 等 价 于 PersonType.prototype.sayName 
sayName() { 
console.log(this.name) ; 


console.log(typeof PersonClass); Mp 
console.log(typeof PersonClass2); eh 


"Function" 
"undefined" 


wy 4 
时 


数 声明 与 
的 行为 


式 那 样 ， 


式 不 需要 在 class 关键 字 后 使 用 标识 符 。 除 了 语法 差异 ， 类 表达 式 的 


函数 表达 式 之 间 的 
影响 甚 微 。 


你 也 可 以 为 类 表达 式 


此 例 中 的 类 表达 式 被 命名 为 personclass2 ° PersonClass2 标识 符 只 在 类 定义 内 部 存在 ， 

LA 能 用 在 类 方法 内 部 ( 例 如 本 例 | 的 sayName() 内 ) 。 在 类 的 外 部 ” typeof PersonClass2 
es RA "undefined" ， eee PersonClass2 绑 定 。 要 理解 为 何如 此 ， 请 查 
看 未 使 用 类 语法 的 等 价 声明 


// 直接 等 价 于 PersonClass 有 具 名 的 类 表达 式 
let PersonClass = (function() { 


"use strict"; 
const PersonClass2 = function(name) { 


// 确认 函数 被 调用 时 使 用 了 _new 
if (typeof new.target === "undefined") { 
throw new Error("Constructor must be called with new."); 


this.name = name; 


Object.defineProperty(PersonClass2.prototype, "sayName", { 
value: function() { 


// US BBO FA AEA new 
if (typeof new.target !== "undefined") { 
throw new Error("Method cannot be called with new."); 


console.log(this.name); 


}, 


enumerable: false, 
writable: true, 
configurable: true 


}); 


return PersonClass2; 


}()); 


创建 具名 的 类 表达 式 ，JS 引擎 的 内 部 实现 稍微 有 了 变化 。 对 于 类 声明 来 说 ， 用 let 定义 的 
外 部 绑 定 与 用 Const 定义 的 内 部 绑 定 有 着 相同 的 名 称 2 而 类 表达 式 可 在 内 内 部 使 用 Const 来 
定义 它 的 不 同名 称 ， 于 是 此 处 的 Personclass2 就 只 能 在 类 的 内 部 使 用 。 


尽管 具名 类 表达 式 的 行为 异 于 具名 部 数 表 达 式 ， 但 它们 之 问 仍然 有 许多 相似 点 。 二 者 都 能 被 
当 作 值 来 使 用 ， 存 在 多 种 利用 可 能 ， 接 下 来 我 将 会 对 此 进行 介绍 。 


作为 一 等 公民 的 类 


在 编程 中 ， 能 被 当 作 值 来 使 用 的 就 称 为 一 等 公民 ( first-class citizen ) ， 意 味 着 它 能 作为 参 
数 传 给 函数 、 能 作为 函数 返回 值 、 能 用 来 给 变量 赋值 。JS 的 函数 就 是 一 等 公民 (它们 有 时 又 
被 称 为 一 等 函数 ) ， 这 是 JS 的 独特 之 处 。 


ESG 延续 了 传统 ， 让 类 同样 成 为 一 等 公民 。 这 就 使 得 类 可 以 被 多 种 方式 所 使 用 。 例 如 ， 它 能 
TEA BBG A BR : 


function createObject(classDef) { 
return new classDef(); 


} 


let obj = createObject(class { 


sayHi() { 
console.log("Hi!"); 
} 
}); 
obj.sayHi(); Pye EEE 


此 例 中 的 createObject() 函数 被 调用 时 接收 了 一 个 匿名 类 表达 式 作为 参数 ， 使 用 new 创建 
了 该 类 的 一 个 实例 ， 并 将 其 返回 出 来 。 随 后 变量 obj 储存 了 所 返回 的 实例 。 


类 表达 式 的 另 一 个 有 趣 用 途 是 立即 调用 类 构造 器 ， 用 于 创建 单 例 ( Singleton) 。 为 此 ， 你 必 
须 使 用 new 来 配合 类 表达 式 ， 并 在 表达 式 后 面 添加 括号 。 例 如 : 


let person = new class { 


constructor(name) { 
this.name = name; 


} 


sayName() { 
console.log(this.name); 


} 
}("Nicholas"); 


person. sayName(); // "Nicholas" 


此 处 创建 了 一 个 匿名 类 表达 式 ， 并 立即 执行 了 它 。 此 模式 允许 你 使 用 类 语法 来 创建 单 例 ， 从 
而 不 留 下 任何 可 被 探查 的 类 引用 (回忆 一 下 personclass 的 例子 ， 匿 名 类 表达 式 只 在 类 的 内 
部 创建 了 绑 定 ， 而 外 部 无 绑 定 ) 。 类 表达 式 后 面 的 圆 括 号 表示 要 调用 前 面 的 函数 ， 并 且 还 允 
许 传 入 参数 。 


本 章 至 今 的 例子 都 集中 于 带 有 方法 的 类 ， 但 你 还 能 在 类 上 创建 访问 器 属性 ， 所 用 的 语法 类 似 
于 对 象 字 面 量 。 


访问 器 属性 


自 有 属性 需要 在 类 构造 器 中 创建 ， 而 类 还 允许 你 在 原型 上 定义 访问 器 属性 。 为 了 创建 一 个 
getter ， 要 使 用 get 关键 字 ， 并 要 与 后 方 标识 符 之 问 留 出 空格 ; 创建 setter 用 相同 方式 ， 只 
是 要 改 用 set 关键 字 。 例 如 : 


class CustomHTMLElement { 


constructor(element) { 
this.element = element; 


get html() { 
return this.element.innerHTML; 


set html(value) { 
this.element.innerHTML = value; 


var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, "html"); 
console.log("get" in descriptor); MIE Segue 
console.log("set" in descriptor); // true 
console.log(descriptor.enumerable); // false 


此 代码 中 的 customHTMLElement 类 用 于 包装 一 个 已 存在 的 DOM 元 素 。 它 的 属性 ntm 拥有 
getter 5 setter ， 委 托 了 元 素 自身 的 innerHTML 方法 。 该 访问 器 属性 被 创建 在 
CustomHTMLElement .prototype 上 ， 并 且 像 其 他 类 属性 那样 被 创建 为 不 可 枚 举 属 性 ° 非 类 的 等 
价 表示 如 下 : 


BT REO 
// 直接 等 价 于 上 个 范例 


let CustomHTMLElement = (function() { 
"use strict"; 


const CustomHTMLElement = function(element) { 


// 确认 函数 被 调用 时 使 用 了 new 
if (typeof new.target === "undefined") { 
throw new Error("Constructor must be called with new."); 


this.element = element; 


Object.defineProperty(CustomHTMLElement.prototype, "html", { 
enumerable: false, 
configurable: true, 
get: function() { 
return this.element.innerHTML; 


}, 
set: function(value) { 
this.element.innerHTML = value; 


3); 


return CustomHTMLElement; 


}()); 


正如 之 前 的 例子 ， 此 例 说 明了 使 用 类 语法 能 够 少 写 大 量 的 代码 。 仅 仅 为 ptm 访问 器 属性 定 
义 的 代码 量 ， 就 几乎 相当 于 等 价 的 类 声明 的 全 部 代码 量 了 。 


可 计算 的 成 员 名 


对 象 字 面 量 与 类 之 间 的 相似 点 还 不 仅 前 面 那些 。 类 方法 与 类 访问 器 属性 也 都 能 使 用 可 计算 的 
名 称 。 语 法 与 对 象 字 面 量 相同 ， 不 是 使 用 标识 符 ， 而 是 用 方 括号 来 包 庄 一 个 表达 式 。 例 如 : 


let methodName = "sayName"; 
class PersonClass { 
constructor(name) { 


this.name = name; 


[methodName]() { 
console.log(this.name); 


let me = new PersonClass("Nicholas"); 
me.sayName(); // "Nicholas" 


此 版 本 的 personclass 使 用 了 一 个 变量 来 命名 类 定义 内 的 方法 。 字 符 串 "sayName" 被 赋值 给 
了 methodName 变量 ， 而 methodName 变量 则 被 用 于 声明 此 后 能 被 直接 访问 的 sayName() 方 
法 。 


访问 器 属性 能 以 相同 方式 使 用 可 计算 的 名 称 ， 就 像 这 样 : 


let propertyName = "html"; 
class CustomHTMLElement { 
constructor(element) { 


this.element = element; 


get [propertyName]() { 
return this.element.innerHTML; 


set [propertyName](value) { 
this.element.innerHTML = value; 


此 处 html 的 getter 4 setter 被 设置 为 需 使 用 propertyName 变量 ， 访 问 此 属性 的 使 用 依然 
是 html ， 此 处 影响 的 只 有 定义 方式 。 


你 已 经 看 到 了 在 类 与 对 象 字面 量 之 间 有 许多 相似 点 ， 包 括 方法 、 访 问 器 属性 、 可 计算 的 名 
称 。 此 外 还 有 一 个 相似 点 需要 介绍 ， 即 生成 器 。 


生成 器 方法 


第 八 章 介 绍 了 生成 器 ， 你 已 学 会 如 何在 对 象 字 面 量 上 定义 一 个 生成 器 : 只 要 在 方法 名 称 前 附 
加 一 个 星 号 ( * ) 。 这 一 语法 对 类 同样 有 效 ， 人 允许 将 任何 方法 变 为 一 个 生成 器 。 此 处 有 个 范 
例 : 


class MyClass { 


*createIterator() { 
yield 1; 
yield 2; 
yield 3; 


} 


let instance = new MyClass(); 
let iterator = instance.createIterator(); 


此 代码 创建 了 一 个 拥有 createIterator() 生成 器 的 Myclass 类 。 该 方法 返回 了 一 个 迭代 

器 ， 它 的 值 在 生成 器 内 部 用 硬 编码 提供 。 当 你 使 用 一 个 对 象 来 表示 值 的 集合 、 并 要 求 能 简单 
和 迭代 这 些 值 ， 那 么 生成 器 方法 就 非常 有 用 。 数 组 、Set 与 Map 都 拥有 多 个 生成 器 方法 ， 负 责 
让 开发 者 用 多 种 方式 来 操作 它们 的 项 。 


既然 生成 器 方法 很 有 用 ， 那 么 在 表示 集合 的 自 定义 类 中 定义 一 个 默认 和 迭代 器 ， 那 就 更 好 。 你 
可 以 使 用 symbol.iterator 来 定义 生成 器 方法 ， 从 而 定义 出 类 的 默认 和 迭代 器 ， 就 像 这 样 : 


class Collection { 


constructor() { 
this.items = []; 


} 


*[Symbol.iterator]() { 
yield *this.items.values(); 
} 
} 


var collection = new Collection(); 
collection.items.push(1); 
collection.items.push(2); 
collection.items.push(3); 


for (let x of collection) { 
console.log(x); 


} 


// 输出 : 
Tf 1 
lif P 
// 


w 


此 例 为 生成 器 方法 使 用 了 一 个 可 计算 名 称 ， 并 将 此 方法 委托 到 this.items 数组 的 values() 
和 途 代 器 上 。 任 意 管理 集合 的 类 都 包含 一 个 默认 和 迭代 器 ， 这 是 因为 一 些 集合 专用 的 操作 都 要 求 
目标 集合 具有 迭代 器 。 现 在 ， collection 的 任意 实例 都 可 以 在 for-of 循环 内 被 直接 使 
用 ， 也 能 配合 扩展 运算 符 使 用 。 


当 你 想 让 方法 与 访问 器 属性 在 对 象 实 例 上 出 现时 ， 就 应 当 把 它们 添加 到 类 的 原型 上 。 而 另 一 
方面 ， 若 想 将 方法 与 访问 器 属性 绑 定 到 类 自身 ， 那 么 你 就 需要 使 用 静态 成 员 。 
静态 成 员 


直接 在 构造 器 上 添加 额外 方法 来 模拟 静态 成 员 ， 这 在 ES5 及 更 早 版 本 中 是 另 一 个 通用 的 模 
式 。 例 如 : 


function PersonType(name) { 
this.name = name; 


Jl #ARBE 
PersonType.create = function(name) { 
return new PersonType(name) ; 


}; 


// 实例 方法 
PersonType.prototype.sayName = function() { 
console.log(this.name) ; 


}; 


var person = PersonType.create("Nicholas"); 


在 其 他 编程 语言 中 ， 工 厂 方法 PersonType.create() 会 被 认定 为 一 个 静态 方法 ， 它 的 数据 不 
依赖 PersonType 的 任何 实例 ° ES6 的 类 简化 了 静态 成 员 的 创建 只 要 在 方法 与 访 问 器 属性 
的 名 称 前 添加 正式 的 static 标注 。 作 为 一 个 例子 ， 此 处 有 个 与 上 例 等 价 的 类 : 


class PersonClass { 





// 等 价 于 PersonType 743 
constructor(name) { 
this.name = name; 


// 等 价 于 PersonType.prototype.sayName 
sayName() { 
console.log(this.name); 


// 等 价 于 PersonType.create 
static create(name) { 
return new PersonClass(name); 


let person = PersonClass.create("Nicholas"); 


PersonClass 的 定义 拥有 名 为 create() 的 单个 静态 方法 ， 此 语法 与 sayName() 基本 相同 ， 
只 多 了 一 个 static 关键 字 。 你 能 在 类 中 的 任何 方法 与 访问 器 属性 上 使 用 static 关键 字 ， 
唯一 限制 是 不 能 将 它 用 于 constructor 方法 的 定义 。 


静态 成 员 不 能 用 实例 来 访问 ， 你 始终 需要 直接 用 类 自身 来 访问 它们 。 


使 用 派生 类 进行 继承 


ES6 之 前 ， 实 现 自 定 义 类 型 的 继承 是 个 繁琐 的 过 程 。 严 格 的 继承 要 求 有 多 个 步骤 。 例 如 ， 研 
完 以 下 范例 : 


function Rectangle(length, width) { 
this.length = length; 
this.width = width; 


Rectangle.prototype.getArea = function() { 
return this.length * this.width; 


}; 


function Square(length) { 
Rectangle.call(this, length, length); 


Square.prototype = Object.create(Rectangle.prototype, { 
constructor: { 
value: Square, 
enumerable: true, 
writable: true, 
configurable: true 


}); 
var square = new Square(3); 


console.log(square.getArea()); // 9 
console.log(square instanceof Square); // true 
console.log(square instanceof Rectangle); // enue 


Square 继承 了 Rectangle  ， 为 此 它 必 须 使 用 Rectangle.prototype 所 创建 的 一 个 新 对 象 来 
重 写 Square.prototype ? 并 且 还 要 调用 Rectangle.call() 方法 。 这 些 步骤 常常 会 摘 尝 JS 
的 新 手 ， 并 会 成 为 有 经 验 开发 者 出 错 的 根源 之 一 。 


类 让 继承 工作 变 得 更 轻易 ， 使 用 熟悉 的 extends 关键 字 来 指定 当前 类 所 需要 继承 的 函数 ， 即 
可 。 生 成 的 类 的 原型 会 被 自动 调整 ， 而 你 还 能 调用 suero 方法 来 访问 基 类 的 构造 器 。 此 处 
是 与 上 个 例子 等 价 的 ES6 代码 : 


class Rectangle { 
constructor(length, width) { 
this.length = length; 
this.width = width; 


getArea() { 
return this.length * this.width; 


class Square extends Rectangle { 
constructor(length) { 


// 与 Rectangle.call(this, length, length) 相同 
super(length, length); 


var square = new Square(3); 


console.log(square.getArea()); // 9 
console.log(square instanceof Square); // true 
console.log(square instanceof Rectangle); 77 EPOS 


此 次 Square 类 使 用 了 extends 关键 字 继 承 了 Rectangle ° Square 构造 器 使 用 了 
super() 配合 指定 参数 调用 了 Rectangle 的 构造 器 。 注意 与 ES5 版 本 的 代码 不 同 ， 
Rectangle 标识 符 仅 在 类 定义 时 被 使 用 了 (在 extends 之 后 ) 。 


继承 了 其 他 类 的 类 被 称 为 派生 类 ( derived classes ) 。 如 果 派 生 类 指定 了 构造 器 ， 就 需要 
使 用 super() ? 和 否则 会 造成 错误 。 若 你 选 择 不 使 用 构造 器 ” super() 方法 会 被 自动 调用 ， 
并 会 使 用 创建 新 实例 时 提供 的 所 有 参数 。 例 如 ， 下 列 两 个 类 是 完全 相同 的 : 


class Square extends Rectangle { 
// 没有 构造 器 


// 等 价 于 : 


class Square extends Rectangle { 
constructor(...args) { 
super(...args); 


此 例 中 的 第 二 个 类 展示 了 与 所 有 派生 类 默认 构造 器 等 价 的 写法 ， 所 有 的 参数 都 按 顺序 传递 给 
了 基 类 的 构造 器 。 在 当前 需求 下 ， 这 种 做 法 并 不 完全 准确 ， 因 为 square 构造 器 只 需要 单个 
参数 ， 因 此 最 好 手动 定义 构造 器 。 


使 用 super() 时 需 牢记 以 下 几 点 : 


1. 你 只 能 在 派生 类 中 使 用 supero 。 若 尝试 在 非 派生 的 类 (BP: 没有 使 用 extends 
关键 字 的 类 ) 或 函数 中 使 用 它 ， 就 会 抛 出 错误 。 

2， 在 构造 器 中 ， 你 必须 在 访问 this 之 前 调用 super() ° WT super) 负责 初始 化 
this ， 因 此 试图 先 访问 this 自然 就 会 造成 错误 。 

3， 若 在 类 的 构造 器 中 不 调用 supero ， 唯 一 避免 出 错 的 办 法 是 在 构造 器 中 返回 一 个 对 
象 o 


wg 


屏蔽 类 方法 


派生 类 中 的 方法 总 是 会 屏蔽 基 类 的 同名 方法 。 例 如 ， 你 可 以 将 getArea() 方法 添加 到 
Square 类 ， 以 便 重 定义 它 的 功能 : 


class Square extends Rectangle { 
constructor(length) { 
super(length, length); 


// 重 写 并 屏蔽 Rectangle. prototype. getArea() 
getArea() { 
return this.length * this.length; 


由 于 getArea() 已 经 被 定义 为 square 的 一 部 分 ， Rectangle.prototype.getArea() 方法 就 
不 能 在 square 的 任何 实例 上 被 调用 。 当 然 ， 你 总 是 可 以 使 用 super.getArea() 方法 来 调用 
基 类 中 的 该 方法 ， 就 像 这 样 : 


class Square extends Rectangle { 
constructor(length) { 
super(length, length); 


// 重 写 、 屏 蔽 并 调用 了 Rectangle. prototype. getArea() 
getArea() { 
return super.getArea(); 


用 这 种 方式 使 用 super ， 其 效果 等 同 于 第 四 章 讨论 过 的 super 引用 ( 详 见 “使 用 Super 引用 
的 简单 原型 访问 *”) 。 this 值 会 被 自动 设置 为 正确 的 值 ， 因 此 你 就 能 进行 简单 的 调用 。 


继承 静态 成 员 


如 果 基 类 BAR > ABA 态 成 员 在 派生 类 中 也 是 可 用 的 。 继 承 的 工作 方式 类 似 于 
其 他 语言 ve ies JS 而 言 则 Aa 此 处 有 个 范例 : 


class Rectangle { 
constructor(length, width) { 
this.length = length; 
this.width = width; 


getArea() { 
return this.length * this.width; 


static create(length, width) { 
return new Rectangle(length, width); 


class Square extends Rectangle { 
constructor(length) { 


// 与 Rectangle.call(this, length, length) 相同 
super(length, length); 


var rect = Square.create(3, 4); 


console.log(rect instanceof Rectangle); // true 
console.log(rect.getArea()); I 12 
console.log(rect instanceof Square); // false 


在 此 代码 中 ， 一 个 新 的 静态 方法 create() 被 添加 到 Rectangle 类 中 。 通 过 继承 ， 该 方法 会 
以 Square.create() 的 形式 存在 ， 并 且 其 行为 方式 与 Rectangle.create() 一 样 。 


从 表达 式 中 派生 类 


在 ES6 中 派生 类 的 最 强大 能 力 ， 或 许 就 是 外 B 。 只 要 一 个 表达 式 能 够 返回 
一 个 具有 [[Construct]] 属性 以 及 原型 型 的 函数 ， 你 就 可 以 对 其 使 用 extends 。 例 如 : 


function Rectangle(length, width) { 
this.length = length; 
this.width = width; 


Rectangle.prototype.getArea = function() { 
return this.length * this.width; 


}; 


class Square extends Rectangle { 
constructor(length) { 
super(length, length); 


} 
} 
var x = new Square(3); 
console.log(x.getArea()); // 9 
console.log(x instanceof Rectangle); // teue 


Rectangle 被 定义 为 ESS 风格 的 构造 器 ， 而 Square 则 是 一 个 类 。 由 于 Rectangle 具有 
[[Construct]] 以 及 原型 ， Square 类 就 能 直接 继承 它 。 


extends 后 面 能 接受 任意 类 型 的 表达 式 ， 这 带 来 了 巨大 可 能 性 ， 例 如 动态 地 决定 所 要 继承 的 


类 : 


function Rectangle(length, width) { 
this.length = length; 
this.width = width; 


Rectangle.prototype.getArea = function() { 
return this.length * this.width; 


}; 


function getBase() { 
return Rectangle; 


class Square extends getBase() { 
constructor(length) { 
super(length, length); 


var x = new Square(3); 
console.log(x.getArea()); // 9 
console.log(x instanceof Rectangle); AERUS 


getBase() 函数 作为 类 声明 的 一 部 分 被 直接 调用 ， 它 返回 了 rectangle ， 使 得 此 例 的 功能 等 
价 于 前 一 个 例子 。 es ， 那 也 就 能 创建 不 同 的 继承 方式 。 例 如 ， 你 
可 以 有 效 地 创建 混入 : 


let SerializableMixin = { 
serialize() { 
return JSON.stringify(this); 


}; 


let AreaMixin = { 
getArea() { 
return this.length * this.width; 


}; 


function mixin(...mixins) { 
var base = function() {}; 
Object.assign(base.prototype, ...mixins); 
return base; 


class Square extends mixin(AreaMixin, SerializableMixin) { 
constructor(length) { 
super(); 
this.length = length; 
this.width = length; 


} 
} 
var x = new Square(3); 
console.log(x.getArea()); // 9 
console.log(x.serialize()); // "{"Jength":3, "width":3}" 


此 例 使 用 了 混入 〈 mixin ) 而 不 是 传统 继承 。 mixin() 函数 接受 代表 混入 对 象 的 任意 数量 的 
参数 ， 它 创建 了 一 个 名 为 base 的 函数 ， 并 将 每 个 混入 对 象 的 属性 都 赋值 到 新 函数 的 原型 
上 。 此 函数 随后 被 返回 ， 于 是 Square 就 有 £95 xt 04% extendas 关键 字 了 。 注 意 由 于 仍然 使 
用 了 extends ， 你 就 必须 在 构造 器 内 调用 super() ° 


Square 的 实例 RA RA AreaMixin 的 getArea() 方法 ， 又 有 来 自 SerializableMixin 的 
serialize() 方法 ， AN 。 mixin() AŽ TRAZA AAA 
性 ， 动 态 地 填充 了 新 函数 的 原型 〈《 记 住 : 若 多 个 混入 对 象 拥 有 相同 的 属性 ， 则 只 有 最 后 添加 
的 属性 会 被 保留 ) 。 


任意 表达 式 都 能 在 extends 关键 字 后 使 用 ， 但 并 非 所 有 表达 式 的 结果 都 是 一 个 有 效 的 


类 。 下 列表 达 式 类 型 就 会 明确 导致 错误 : 


® null ， 


。 生成 器 函数 (ELBA) 。 


试图 使 用 结果 为 上 述 值 的 表达 式 来 创建 一 个 新 的 类 实例 ， 都 会 抛 出 错误 ， 因 为 不 存在 
[ [Construct ] ] 可 供 调用 。 


BARA eT RR 


几乎 从 JS 数组 出 现 那 天 开始 ， 开 发 者 就 想 通 过 继承 机 制 来 创建 他 们 自己 的 特殊 数组 类 型 。 在 
ES5 及 早期 版 本 中 ， 这 是 不 可 能 做 到 的 。 试 图 使 用 传统 继承 并 不 能 产生 功能 正确 的 代码 ， 例 
do: 


// 内 置 数组 的 行为 

var colors = []; 

colors[0] = "red"; 
console.log(colors.length); Hip Ab 


colors.length = 0; 
console.log(colors[0]); // undefined 


// 在 ESS 中 尝试 继承 数组 


function MyArray() { 
Array.apply(this, arguments); 
} 


MyArray.prototype = Object.create(Array.prototype, { 
constructor: { 
value: MyArray, 
writable: true, 
configurable: true, 
enumerable: true 
} 
}); 


var colors = new MyArray(); 
colors[0] = "red"; 
console.log(colors.length); // 0 


colors.length = 0; 
console.log(colors[0]); // "red" 


console.log() 在 此 代码 尾部 的 输出 说 明 ， 对 数组 使 用 传统 形式 的 JS 继承 ， 产 生 了 预期 外 的 
行为 。 MyArray 实例 上 的 length 属性 以 及 数值 属性 ， 其 行为 与 内 置 数 组 并 不 一 臻 ， 因 为 这 
些 功能 并 未 被 涵盖 在 Array.apply() 或 数组 原型 中 。 


在 ES6 中 的 类 ， 其 设计 目的 之 一 就 是 允许 从 内 置 对 象 上 进行 继承 。 为 了 达成 这 个 目的 ， 类 的 
继承 模型 与 ESS 或 更 早 版 本 的 传统 继承 模型 有 轻微 差异 : 


在 ES5 的 传统 继承 中 > this 的 值 会 先 被 派生 类 ( 例 | 如 MyArray ) 创 建 ? 随后 基 类 构造 器 
(例如 Array.apply() 方法 ) cee 这 意味 着 this 一 开始 就 是 MyArray 的 实例 ， 之 
后 才 使 用 了 Array 的 附加 属性 对 其 进行 了 装饰 。 


ay 


在 ES6 基于 类 的 继承 中 ? this 的 值 会 先 被 基 类 ( Array ) 创建 ， 随 后 才 被 派生 类 的 构造 
器 ( MyArray ) 所 修改 。 结 果 是 this 初始 就 拥有 作为 基 类 的 内 置 对 象 的 所 有 功能 ， 并 能 正 
确 接收 与 之 关联 的 所 有 功能 。 


以 下 范例 实际 展示 了 基于 类 的 特殊 数组 : 


class MyArray extends Array { 


// 空 代码 块 
} 
var colors = new MyArray(); 
colors[0] = "red"; 
console.log(colors.length); Ui al 


colors.length = 0; 
console.log(colors[®]); // undefined 


MyArray 直接 继承 了 array ， 因 此 工作 方式 与 正规 数组 一 致 。 与 数值 索引 属性 的 互动 会 更 
新 length 属性 ， 而 操纵 length 属性 也 能 更 新 索引 属性 。 这 意味 着 你 既 能 适当 地 继承 

Array 来 创建 你 自己 的 派生 数组 类 ， AAA 对 象 。 伴 随 着 这 些 附加 功能 ， 
ES6 与 派生 类 型 有 效 解决 了 从 内 置 类 型 进行 派生 这 最 后 的 特殊 情况 ， 不 过 这 种 情况 仍然 值得 


继续 研究 。 


Symbol.species 属性 


继承 内 置 对 象 会 带 来 一 个 有 趣 特 性 ， 任 意 能 返回 内 置 对 象 实例 的 方法 ， 在 派生 类 上 却 会 自动 
返回 派生 类 的 实例 。 因 此 ， 若 你 拥有 一 个 继承 了 array 的 派生 类 MyArray ， 诸 如 slice() 
之 类 的 方法 都 会 返回 MyArray 的 实例 。 例 如 


class MyArray extends Array { 
// 空 代码 块 
} 


let items = new MyArray(1, 2, 3, 4), 
subitems = items.slice(i, 3); 


console.log(items instanceof MyArray); // enue 
console.log(subitems instanceof MyArray); // true 


在 此 代码 中 ， slice) 方法 返回 了 MyArray 的 一 个 实例 。 slice) 方法 是 从 array 上 继 
承 的 ， 原 本 应 当 返 回 Array 的 一 个 实例 。 而 symbol.species 属性 在 后 台 造 成 了 这 种 变化 。 


Symbol.species 知名 符号 被 用 于 定义 一 个 能 返回 函数 的 静态 访问 器 属性 。 每 当 类 实例 除了 构 
造 器 之 外 的 方法 必须 创建 一 个 实例 时 ， 前 面 返 回 的 函数 就 被 用 为 新 实例 的 构造 器 。 下 列 内 置 
类 型 都 定义 了 symbol.species 


@ Array 
© ArrayBuffer ( 详 见 第 十 章 ) 
e Map 


® Promise 

@ RegExp 

® Set 

e@ 类 型 化 数组 ( 详 见 第 十 章 ) 


以 上 每 个 类 型 都 拥有 默认 的 Symbol.species 属性 ， 其 返回 值 为 this ° 意味 着 该 属性 总 是 
会 返回 自身 的 构造 器 函数 。 若 你 准备 在 一 个 自 定 义 类 上 实现 此 功能 ， 代 码 就 像 这 样 : 


// 几 个 内 置 类 型 使 用 Species 的 方式 类 似 于 此 
class 人 { 
static get [Symbol.species]() { 
return this; 


constructor(value) { 
this.value = value; 


} 
clone() { 

return new this.constructor[Symbol.species](this.value); 
} 


在 此 例 中 ， symbol.species 知名 符号 被 用 于 定义 Myclass 的 一 个 静态 访问 器 属性 。 注 意 此 
LRA getter 而 没有 setter ， 这 是 因为 修改 类 的 种 类 是 不 允许 的 。 任 何 对 
this.constructor[Symbol.species] 的 调用 都 会 返 回 MyClass ， clone() 方法 使 用 了 该 定义 

来 返回 一 个 新 的 实例 ， 而 没有 直接 使 用 MyClass ， 这 就 允许 派生 类 重 写 这 个 值 。 例 如 : 


class MyClass { 
static get [Symbol.species]() { 
return this; 


constructor(value) { 
this.value = value; 


} 
clone() { 

return new this.constructor[Symbol.species](this.value) ; 
} 


class MyDerivedClass1 extends MyClass { 
// ZRA Ik 


class MyDerivedClass2 extends MyClass { 
static get [Symbol.species]() { 
return MyClass; 


let instance1 = new MyDerivedClass1("foo"), 
clone1 = instance1.clone(), 
instance2 = new MyDerivedClass2("bar"), 
clone2 = instance2.clone(); 


console.log(clone1 instanceof MyClass); Erue 
console.log(clone1 instanceof MyDerivedClass1); true 
console.log(clone2 instanceof MyClass); // true 
console.log(clone2 instanceof MyDerivedClass2); J mise 


此 处 ， MyDerivedClass1 继承 了 MyClass  ， 并 且 未 修改 Symbol.species 属性 。 由 于 
this.constructor[Symbol.species] 会 返回 MyDerivedClassi ， 4 clone() 被 调用 时 ， 它 就 
返回 了 MyDerivedclass1 的 一 个 实例 。 MyDerivedclass2 类 也 继承 了 Myclass ， 但 重 写 了 
Symbol.species ， 让 其 返回 Myclass 。 当 clone() 在 MyDerivedclass2 的 一 个 实例 上 被 调 
用 时 ， 返 回 值 就 变 成 MyClass 的 一 个 实例 。 使 用 Symbol.species ， 任意 派生 类 在 调用 应 当 
返回 实例 的 方法 时 ， 都 可 以 判断 出 需要 返回 什么 类 型 的 值 。 


例如 ， array 使 用 了 symbol.species 来 指定 方法 所 使 用 的 类 ， 让 其 返回 值 为 一 个 数组 。 在 
Array 派生 出 的 类 中 ， 你 可 以 决定 这 些 继承 的 方法 应 返回 何 种 类 型 的 对 象 ， 正 如 : 


class MyArray extends Array { 
static get [Symbol.species]() { 
return Array; 


let items = new MyArray(1, 2, 3, 4), 
subitems = items.slice(i, 3); 


console.log(items instanceof MyArray); M AWG 
console.log(subitems instanceof Array); Hie ETUS 
console.log(subitems instanceof MyArray); // false 


此 代码 重 写 了 从 array 派生 的 MyArray 类 上 的 symbol.species 。 所 有 返回 数组 的 继承 方 
法 现在 都 会 使 用 Array 的 实例 ， 而 不 是 MyArray 的 实例 。 


一 般 而 言 ， 每 当 想 在 类 方法 中 使 用 this.constructor 时 ， 你 就 应 当 使 用 Symbol.species By 
性 。 这 么 做 允许 派生 类 轻易 地 重 写 方法 的 返回 类 型 。 此 外 ， 若 你 从 一 个 拥有 symbol. species 
定义 的 类 创建 了 派生 类 ， 要 保证 使 用 此 属性 ， 而 不 是 直接 使 用 构造 器 。 


在 类 构造 器 中 使 用 new.target 


在 第 三 章 你 已 学 到 了 new.target ， 以 及 在 调用 函数 的 方式 不 同时 它 的 值 是 如 何 变动 的 。 你 
也 可 以 在 类 构造 器 中 使 用 new.target ， 来 判断 类 是 被 如 何 被 调用 的 。 在 简单 情况 下 ， 
new.target 就 等 于 本 类 的 构造 器 函数 ， 正 如 下 例 ; 


class Rectangle { 
constructor(length, width) { 
console.log(new.target === Rectangle); 
this.length = length; 
this.width = width; 


} 
} 
// new.target 就 是 Rectangle 
var obj = new Rectangle(3, 4); // 输出 true 


aa 


此 代码 说 明 在 new Rectangle(3, 4) 被 调用 时 ， new.target 就 等 于 Rectangle 。 类 构造 器 
被 调用 时 不 能 缺少 new ， 因 此 new.target 属性 就 始终 会 在 类 构造 器 内 被 定义 。 不 过 这 个 值 
并 不 总 是 不 变 的 。 研 究 以 下 代码 : 


class Rectangle { 
constructor(length, width) { 
console.log(new.target === Rectangle); 
this.length = length; 
this.width = width; 


class Square extends Rectangle { 
constructor(length) { 
super(length, length) 


// new.target 就 是 Square 
var obj = new Square(3); // 输出 false 


Square 调用 了 Rectangle 构造 器 ， 因 此 当 Rectangle 构造 器 被 调用 时 ” new.target 等 于 
Square 。 这 很 重要 ， 因 为 这 让 构造 器 能 根据 如 何 被 调用 而 更 改 其 行为 。 例 如 ， 你 可 以 使 用 
new.target 来 创建 一 个 抽象 基 类 (一 种 不 能 被 实例 化 的 类 ) ， 如 下 : 


// 静态 的 基 类 
class Shape { 
constructor() { 
if (new.target === Shape) { 
throw new Error("This class cannot be instantiated directly.") 


class Rectangle extends Shape { 
constructor(length, width) { 
super(); 
this.length = length; 
this.width = width; 


} 
} 
var x = new Shape(); // 抛 出 错误 
var y = new Rectangle(3, 4); // 没有 错误 
console.log(y instanceof Shape); // true 


此 例 中 的 shape 类 构造 器 会 在 new.target A Shape 的 时 候 抛 出 错误 ， 意 味 着 new 
Shape() 永远 都 会 抛 出 错误 o 然而， 你 依然 可 以 将 Shape 用 作 一 个 基 类 ， 正 如 Rectangle 
所 做 的 那样 。 supero 的 调用 执行 了 shape 构造 器 ， 而 且 new.target 的 值 等 于 
Rectangle ， 因 此 该 构造 器 能 够 无 错误 地 继续 执行 。 


由 于 调用 类 时 不 能 缺少 new ， 于 是 new.target 属性 在 类 构造 器 内 部 就 绝 不 会 是 


undefined 


x 


ok 


总 结 


ES6 的 类 让 JS 中 的 继承 变 得 更 简单 ， 因 此 你 无 须 丢 弃 已 从 其 他 语言 学 习 到 的 类 知识 。ES6 
的 类 起 初 是 作为 ESS 传统 继承 模型 的 语法 糖 ， 但 添加 了 许多 特性 来 减少 错误 。 


ES6 的 类 配合 原型 继承 来 工作 ， 在 类 的 原型 上 定义 了 非 静 态 的 方法 ， 而 静态 的 方法 最 终 则 被 

绑 定 在 类 构造 器 自身 上 。 类 的 所 有 方法 从 一 开始 就 是 不 可 枚 举 的 ， 这 更 契合 了 内 置 对 象 的 行 

为 ， 后 者 的 方法 默认 情况 下 通常 都 不 可 枚 举 。 此 外 ， 调 用 类 构造 器 时 不 能 缺少 new ， 确 保 了 
类 无 法 意外 地 被 作为 函数 来 调用 。 


基于 类 的 继承 允许 你 从 另 一 个 类 、 函 数 或 表达 式 上 派生 新 的 类 。 这 种 能 力 意味 着 你 可 以 调用 
一 个 函数 来 判断 需要 继承 的 正确 基 类 ， 也 允许 你 使 用 混入 或 其 他 不 同 的 组 合 模式 来 创建 一 个 
新 类 。 新 的 继承 方式 让 继承 数组 之 类 的 内 置 对 象 也 变 为 可 能 ， 并 且 其 工作 符合 预期 。 


你 可 以 在 类 构造 器 内 部 使 用 new.target ° 以 便 根 据 类 如 何 被 调用 来 做 出 不 同 的 行为 。 最 常 
用 的 就 是 创建 一 个 抽象 基 类 ， 直 接 实例 化 它 会 抛 出 错误 ， 但 它 仍 然 能 被 其 他 类 所 继承 。 

总 之 ， 类 是 JS 的 一 项 新 特性 ， 它 提供 了 更 简洁 的 语法 与 更 好 的 功能 ， 能 通过 安全 一 致 的 方式 
来 自 定义 一 个 对 象 类 型 。 


Fa PE 增强 的 数组 功能 


数组 是 JS 中 的 一 种 基本 对 象 。 JS 的 其 他 方面 都 随 着 时 间 的 推移 在 进化 ， 而 数组 却 基 本 保持 
不 变 ， 直 到 ESS 才 添加 了 几 个 相关 的 方法 让 数组 更 易 使 用 。 ES6 也 添加 了 很 多 功能 来 继续 强 
化 数组 ， 例 如 新 的 创建 方法 、 几 个 有 用 的 便捷 方法 ， 还 增加 了 创建 类 型 化 数组 (typed 
array) 的 能 力 。 


e 创建 数组 
o Array.of() 方法 
o Array.from() 方法 
m 映射 转换 
m 在 可 和 迭代 对 象 上 使 用 
e 所 有 数组 上 的 新 方法 
o find() 与 findlndex() 方法 
o fill() 方法 
o copyWithin() 7 
e 类 型 化 数组 
o 数值 数据 类 型 
o 数组 缓冲 区 
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n 创建 特定 类 型 视图 
o 类 型 化 数组 与 常规 数组 的 相似 点 
o 公共 方法 
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创建 数组 


在 ES6 之 前 创建 数组 主要 存在 两 种 方式 : array 构造 器 与 数组 字面 量 写 法 。 这 两 种 方式 都 
需要 将 数组 的 项 分 别 列 出 ， 并 且 还 要 受到 其 他 限制 。 将 “类 数组 对 象 ” ( 即 : 拥有 数值 类 型 索引 
与 长 度 属 性 的 对 象 ) 转换 为 数组 也 并 不 自由 ， 经 常 需要 书写 额外 的 代码 。 为 了 使 数组 更 易 创 


建 ，ES6 新 增 了 array.of() 与 Array.from() 方法 。 


Array.of() 方法 


ES6 为 数组 新 增 创建 方法 的 目的 之 一 ， 是 帮助 开发 者 在 使 用 array 构造 器 时 避 开 JS 语言 的 
一 个 怪异 点 。 调 用 new Array() 构造 器 时 ， 根 据 传 入 参数 的 类 型 与 数量 的 不 同 ， 实 际 上 会 导 
致 一 些 不 同 的 结果 ， 例 如 : 


let items = new Array(2); 


console.log(items.length); // 2 
console.log(items[0]); // undefined 
console.log(items[1]); // undefined 


items = new Array("2"); 
console.log(items.length); // 1 
console.log(items[0@]); Hf SPM 


items = new Array(1, 2); 


console.log(items.length); // 2 
console.log(items[0@]); Hf Al 
console.log(items[1]); LI? 


items = new Array(3, "2"); 


console.log(items.length); Wf 72 
console.log(items[0]); LI 
console.log(items[1]); VE NPN 


当 使 用 单个 数值 参数 来 调用 array 构造 器 时 ， 数 组 的 长 度 属性 会 被 设置 为 该 参数 ; 而 如 果 使 
用 单个 的 非 数 值 型 参数 来 调用 ， 该 参数 就 会 成 为 目标 数组 的 唯一 项 ; 如 果 使 用 多 个 参数 (无 
论 是 否 为 数值 类 型 ) 来 调用 ， 这 些 参 数 也 会 成 为 目标 数组 的 项 。 数 组 的 这 种 行为 既 混乱 又 有 
风险 ， 因 为 有 时 可 能 不 会 留意 所 传 参数 的 类 型 。 

ES6 引入 了 Array.of() 方法 来 解决 这 个 问题 。 该 方法 的 作用 非常 类 似 array 构造 器 ， 但 在 


使 用 单个 数值 参数 的 时 候 并 不 会 导致 特殊 结果 。 Array.of() 方法 总 会 创建 一 个 包含 所 有 传 
入 参数 的 数组 ， 而 不 管 参数 的 数量 与 类 型 。 下 面 几 个 例子 演示 了 _ Array.of() 的 用 法 : 


let items = Array.of(1, 2); 


console.log(items.length); Up 
console.log(items[0]); iif val 
console.log(items[1]); Hit B 


items = Array.of(2); 
console.log(items.length); Hie “Ab 
console.log(items[0]); We 2 


items = Array.of("2"); 
console.log(items.length) ; Hae ab 
console.log(items[0]); Uff 2S 


在 使 用 array.of() 方法 创建 数组 时 ， 只 需 将 想 要 包 
例子 创建 了 一 个 包含 两 个 项 的 数组 ， 第 二 个 数组 只 包 
含 了 单个 字符 串 项 。 这 个 结果 类 似 于 使 用 数组 字面 量 
字面 量 写法 来 代替 Array.of() ， 但 若 想 向 函数 传递 
造 器 能 够 确保 行为 一 致 。 例 如 


含 在 数组 内 的 值 作为 参数 传 入 。 第 一 个 
含 了 单个 数值 项 ， 而 最 后 一 个 数组 则 包 
写法 ， 通 常 你 都 可 以 在 原生 数组 上 使 用 
参数 ， 使 用 Array .of() 而 非 Array 构 


function createArray(arrayCreator, value) { 
return arrayCreator(value); 


} 


let items = createArray(Array.of, value); 


此 代码 中 的 createArray() BRELARBR : 一 个 数组 创建 器 与 一 个 值 ， 并 会 将 后 者 插入 
到 目标 数组 中 。 你 应 当 向 createArray() 函数 传递 Array.of() 作为 第 一 个 参数 来 创建 新 数 
组 ; 相反 ， 若 传递 array 构造 器 则 会 有 危险 ， 因 为 你 无 法 保证 第 二 个 参数 不 是 数值 类 型 。 


Array.of() 方法 并 没有 使 用 symbol.species 属性 (参阅 第 九 章 ) 来 决定 返回 值 的 类 
型 ， 而 是 使 用 了 当前 的 构造 器 (FP of() 方法 内 部 的 this ) 来 做 决定 。 
Array.from() 方法 


在 JS 中 将 非 数 组 对 象 转 换 为 ee 总 paws 烦 。 例 如 得 将 类 数组 的 arguments 对 
象 当 做 数组 来 使 用 ， 那 么 你 首先 需要 对 其 转换 。 在 ES5 ， 进 行 这 种 转换 需要 编写 一 个 
函数 ， 类 似 下 面 这 样 : 


function makeArray(arrayLike) { 
var result = []; 


for (var i = 0, len = arrayLike.length; i < len; i++) { 
result.push(arrayLike[i]); 
} 


return result; 


} 


function doSomething() { 
var args = makeArray(arguments); 


// 使 用 args 


该 方式 手动 创建 了 一 个 result 数组 ， 并 将 arguments 对 象 的 所 有 项 复制 到 该 数组 中 。 这 种 
方式 虽然 有 效 ， 却 为 一 个 简单 操作 书写 了 过 多 的 代码 。 开 发 者 最 终 发 现 他 们 可 以 调用 数组 原 
生 的 slice) 方法 来 减少 代码 量 ， 就 像 这 样 


function makeArray(arrayLike) { 
return Array.prototype.slice.call(arrayLike) ; 


} 


function doSomething() { 
var args = makeArray(arguments); 


// 使 用 args 


这 段 代 码 的 功能 与 前 一 段 代码 等 效 。 它 能 正常 工作 是 因为 将 slice() 方法 的 this 设置 为 类 
数组 对 象 ， slice) 只 需要 有 数值 类 型 的 索引 与 长 度 属性 就 能 正常 工作 ， 而 类 数组 对 象 能 满 
足 这 些 要 求 。 


尽管 这 种 技巧 所 用 的 代码 量 更 少 ， 但 调用 Array.prototype.slice.call(arrayLike) 并 没有 明 
确 体现 出 "要 将 类 数组 对 象 转换 为 数组 ”的 目的 。 幸 运 的 是 ，ES6 新 增 了 array.from() 方法 
来 提供 一 种 明确 清晰 的 方式 以 解决 这 方面 的 需求 。 


将 可 和 迭代 对 象 或 者 类 数组 对 象 作 为 第 一 个 参数 传 入 ， Array.from() 就 能 返回 一 个 数组 。 此 处 
有 个 简单 的 例子 


function doSomething() { 
var args = Array.from(arguments); 


// 使 用 args 


此 处 调用 Array.from() 方法 ， 使 用 arguments 对 象 创建 了 一 个 新 数组 args ? 它 是 一 个 数 
组 实例 ， 并 且 包 含 了 arguments 对 象 的 所 有 项 ， 同 时 还 保持 了 项 的 顺序 。 


Array.from() 方法 同样 使 用 this 来 决定 要 返回 什么 类 型 的 数组 。 


映射 转换 


如 果 你 想 实行 进一步 的 数组 转换 ， 可 以 向 Array.from() 方法 传递 一 个 映射 用 的 函数 作为 第 
个 参数 。 此 函数 会 将 类 数组 对 象 的 每 一 个 值 转 换 为 目标 形式 ， 并 将 其 EEEa AR 
位 置 上 。 例 如 : 


function translate() { 
return Array.from(arguments, (value) => value + 1); 


} 
let numbers = translate(i, 2, 3); 


console.log(numbers) ; Ui Paes 


此 代码 将 (value) => value + 1 作为 映射 函数 传递 给 了 Array.from() 方法 ， 对 每 个 项 进行 
了 一 次 +1 处 理 。 如 果 映 射 函 数 需要 在 对 象 上 工作 ， 你 可 以 手动 传递 第 三 个 参数 给 
Array.from() 方法 ， 从 而 指定 映射 函数 内 部 的 this 值 。 


let helper = { 
df 


add(value) { 
return value + this.diff; 
} 
J; 


function translate() { 
return Array.from(arguments, helper.add, helper); 


} 
let numbers = translate(i, 2, 3); 


console.log(numbers); LL OG nA 


这 个 例子 使 用 了 helper.add() 作为 映射 函数 。 由 于 该 函数 使 用 了 _ this,diff 属性 ， 你 必须 
向 Array. 方法 传递 第 三 个 参数 用 于 指定 this 。 借 助 这 个 参数 ， array.from() 就 可 
以 方便 地 进行 数据 转换 ， 而 无 须 调用 bindo 方法 、 或 用 其 他 方式 去 指定 this the 


在 可 迭代 对 象 上 使 用 


Array.from() 方法 不 仅 可 用 于 类 数组 对 和 象 ， 也 可 用 于 可 和 迭 ieee 这 意味 着 该 方法 可 以 将 任 
意 包 含 Symbol.iterator 属性 的 对 象 转 换 为 数组 。 例 如 


let numbers = { 
*[Symbol.iterator]() { 

yield 1; 

yield 2; 

yield 3; 


}; 
let numbers2 = Array.from(numbers, (value) => value + 1); 


console.log(numbers2) ; Li Didi A 


由 于 代码 中 的 numbers 对 象 是 一 个 可 和 迭代 对 象 ， 你 可 以 把 它 直接 传递 给 array.from() 7 
法 ， 从 而 将 它 包 含 的 值 转换 到 数组 内 。 映 射 函 数 对 每 个 数 都 进行 了 +1 处 理 ， 因 此 目标 数组 的 
内 容 就 是 2、3、4 ;而 不 是 1、2、3。 


如 果 一 个 对 但 既是 类 数组 对 有 象 ， 又 是 可 迭代 对 象 ， 那 么 Array.from() 方法 就 会 使 用 和 迭 
代 器 来 决定 需要 转换 的 值 。 


所 有 数组 上 的 新 方法 


ES6 延续 了 ES5 的 工作 ， 为 数组 增加 了 几 个 新 方法 。 Find’) 4 findindex() 方法 是 为 了 
让 开发 者 能 够 处 理 包 含 任意 值 的 数组 ， 而 fill() 与 copywithin() 方法 则 是 受到 了 类 型 化 
数组 ( typed arrays ) 的 启发 。 类 型 化 数组 是 在 ESE 中 引入 的 ， 只 允许 包含 数值 类 型 的 
值 。 


find() 与 findlndex() 方法 


在 ES5 之前， 由 于 没有 对 应 的 原生 方法 ， 检 索 数组 相当 麻烦 ESS 增加 了 indexof() 与 
lastIndexof() 方法 ， 从 而 允许 开发 者 在 数组 中 查找 特定 值 。 这 虽然 是 很 大 的 进步 ， 但 依然 
有 局 限 性 ， 因 为 你 每 次 只 能 用 它们 来 查找 茶 个 特定 值 。 例 如 ， 若 想 在 一 系列 数值 中 间 查 找 第 
一 个 偶数 ， 你 必须 自己 写 代码 来 实现 这 个 意图 。 而 ES6 引入 了 find() 与 findIndex() 方 
法 ， 从 而 解决 了 这 方面 的 问题 。 


find() 与 findIndex() 方法 均 接受 两 个 参数 : 一 个 回调 函数 、 一 个 可 选 值 用 于 指定 回调 函 
数 内 部 的 this 。 该 回调 函数 可 接收 三 个 参数 : 数组 的 某 个 元 素 、 该 元 素 对 应 的 索引 位 置 、 

以 及 该 数组 自身 ， 这 与 map() 和 foreach) 方法 的 回调 函数 所 用 的 参数 一 致 。 在 给 定 的 元 

素 满足 你 定义 的 条 件 时 ， 回 调 沟 数 应 当 返 回 true ， 而 find() 与 findIndex() 方法 均 会 在 
回调 函数 第 一 次 返回 true 时 停止 查找 。 


二 者 唯一 的 区 别 是 : find() 方法 会 返回 匹配 的 值 ， 而 findIndex() 方法 则 会 返回 匹配 位 置 
的 索引 。 此 处 有 个 示例 : 


let numbers = [25, 30, 35, 40, 45]; 
console.log(numbers.find(n => n > 33)); Hf EAE 


console.log(numbers.findIndex(n => n > 33)); Ye 2 


这 段 代码 使 用 了 find() 与 findIndex() 方法 在 numbers 数组 中 查找 第 一 个 大 于 33 的 元 
素 ， 前 者 返回 35 ， 后 者 则 返回 2 ， 也 就 是 35 这 个 元 素 在 数组 中 的 索引 值 。 


find() 与 findindex() 方法 在 查找 满足 特定 条 件 的 数组 元 素 时 非常 有 用 。 但 若 只 想 查找 特 
定 值 ， indexof() 与 lastIndexof() 方法 则 是 更 好 的 选择 。 


fill() 方法 
fil1() 方法 能 使 用 特定 值 填充 数组 中 的 一 个 或 多 个 元 素 。 当 只 使 用 一 个 参数 的 时 候 ， 该 方法 
会 用 该 参数 的 值 填 充 整 个 数组 ， 例 如 : 

let numbers = [1, 2, 3, 4]; 

numbers. fill(1); 

console.log(numbers.toString()); Hie Ayal al al 
此 代码 中 的 numbers .fil1(1) 调用 将 numbers 数组 中 的 所 有 元 素 都 填充 为 1 。 若 你 不 想 改 
变数 组 中 的 所 有 元 素 ， 而 只 想 改变 其 中 一 部 分 ， 那 么 可 以 使 用 可 选 的 起 始 位 置 参数 与 结束 位 
置 参数 (不 包括 结束 位 置 的 那个 元 素 ) ， 就 像 这 样 : 

let numbers = [1, 2, 3, 4]; 

numbers.fill(i, 2); 

console.log(numbers.toString()); Lf 2a, Wp ak 

numbers.fill1(0, 1, 3); 

console.log(numbers.toString()); Lif le OVO) alk 

当 进 行 numbers.fill(1,2) 调用 时 ， 第 二 个 参数 2 指定 从 数组 索引 值 为 2 的 元 素 ( 即 数组 
的 第 3 个 元 素 ) 开始 填充 ， 而 此 时 没有 指定 第 三 个 参数 ， 因 此 结束 位 置 默认 为 numbers 数组 
的 长 度 ， 意 味 着 该 数组 的 最 后 两 个 元 素 会 被 十 充 为 1 。 而 numbers.fill(o, 1, 3) 调用 则 将 


该 数组 索引 值 为 1 与 2 的 元 素 填 充 为 o 。 在 调用 fino 方法 时 指定 第 二 个 和 第 三 个 参 
数 ， 允 许 一 次 性 填充 数组 中 多 个 元 素 ， 避 免 改写 整个 数组 。 


如 果 提 供 的 起 始 位 置 或 结束 位 置 为 负数 ， 则 它们 会 被 加 上 数组 的 长 度 来 算出 最 终 的 位 
置 。 例 如 : 将 起 始 位 置 指定 为 -1 ， 就 等 于 是 array.length - 1 ° 此 处 的 array 指 的 
是 filo) 方法 所 要 处 理 的 数组 。 


copyWithin() 方法 


copywithin() 方法 与 filo) 类 似 ， 也 能 一 次 性 修改 数组 的 多 个 元 素 。 不 过 ， 与 fino 使 
用 单个 值 来 填充 数组 不 同 ， copywithin() 方法 允许 你 在 数组 内 部 复制 自身 元 素 。 为 此 你 需要 
传递 两 个 参数 给 copywithin() 方法 : 从 什么 位 置 开始 进行 填充 ， 以 及 被 用 来 复制 的 数据 的 起 
始 位 置 索引 。 


例如 ， 将 数组 的 前 两 个 元 素 复 制 到 数组 的 最 后 两 个 位 置 ， 你 可 以 这 么 做 : 


let numbers = [1, 2, 3, 4]; 


// 从 索引 2 的 位 置 开始 粘贴 
// 从 数组 索引 O 的 位 置 开始 复制 数据 


numbers.copyWithin(2, 0); 


console.log(numbers.toString()); JU, An PA, Aly Z2 


这 段 代码 从 numbers 数组 索引 值 为 2 的 元 素 开始 进行 填充 ， 因 此 索引 值 为 2 与 3 的 元 素 都 会 
被 覆盖 ; 调用 copywithin() 方法 时 将 第 二 个 参数 指定 为 o ， 表 示 被 复制 的 数据 从 索引 值 为 
0 的 元 素 开 始 ， 一 直到 没有 元 素 可 供 复制 为 止 。 


默认 情况 下 ， copywithin() 方法 总 是 会 一 直 复 制 到 数组 末尾 ， 不 过 你 还 可 以 提供 一 个 可 选 参 
数 来 限制 到 底 有 多 少 元 素 会 被 覆盖 。 这 第 三 个 参数 指定 了 复制 停止 的 位 置 (不 包含 该 位 置 自 
身 ) ， 此 处 有 个 范例 : 


let numbers = [1, 2, 3, 4]; 


// 从 索引 2 
// WRARS 位置 开始 复制 数据 
RG] 1 时 停止 复制 
numbers.copyWithin(2, 0, 1); 





console.log(numbers.toString()); if “aly Pap aly 


在 这 个 例子 中 ， 因 为 可 选 的 结束 位 置 参 数 被 指定 为 1 ， 于 是 只 有 索引 值 为 0 的 元 素 被 复制 
了 ， 而 该 数组 的 最 后 一 个 元 素 并 没有 被 修改 。 
类 似 于 fill) 方法 ， 如 果 你 向 copywithin() 方法 传递 负数 参数 ， 数 组 的 长 度 会 自动 
被 加 到 该 参数 的 值 上 ， 以 便 算 出 正确 的 索引 位 置 。 


fill() 与 copywithin() 方法 年 看 不 太 有 用 ， 因 为 它们 起 源 于 类 型 化 数组 的 需求 ， 而 出 于 功 
能 一 致 性 的 目的 才 被 添加 到 常规 数组 上 。 不 过 ， 接 下 来 的 小 节 你 就 会 学 到 如 何 用 类 型 化 数组 
来 按 位 操作 数值 ， 到 时 这 两 个 方法 就 会 大 显 身手 。 


类 型 化 数组 


类 型 化 数组 是 有 特殊 用 途 的 数组 ， 被 设计 用 来 处 理 数值 类 型 数据 (正如 名 称 所 示 ， 不 是 所 有 
RA) 。 类 型 化 数组 的 起 源 可 以 追溯 到 WebGL 一 Open GL ES 2.0 的 一 个 接口 ， 设 计 用 于 
配合 网 页 上 的 <canvas> 元 素 。 类 型 化 数组 作为 该 接口 实现 的 一 部 分 ， 为 JS 提供 了 快速 的 按 
位 运算 能 力 。 


对 于 WebGL 的 需求 来 说 ，JS 原生 的 数学 运算 实在 太 慢 ， 因 为 它 使 用 64 位 浮 点 数 格式 来 存 
储 数值 ， 并 在 必要 时 将 其 转换 为 32 位 整数 。 引 入 类 型 化 数组 突破 了 格式 限制 并 带 来 了 更 好 的 
数学 运算 性 能 ， 其 设计 概念 是 : 单个 数值 可 以 被 视 为 由 "位 ?构成 的 数组 ， 并 且 可 以 对 其 使 用 与 
JS 数组 现 有 方法 类 似 的 方法 。 


ES6 采纳 了 类 型 化 数组 ， 将 其 作为 语言 的 一 个 正式 部 分 ， 以 确保 在 JS 引擎 之 间 有 更 好 的 兼容 
性 ， 并 确保 与 JS 数组 有 更 好 的 互 操作 性 。 尽 管 ES6 的 类 型 化 数组 与 WebGL 的 类 型 化 数组 
并 不 完全 一 样 ， 但 它们 已 足够 相似 ， 让 前 者 能 被 视 为 后 者 的 进化 版 本 ， 而 非 截然 不 同 。 


数值 数据 类 型 


JS 数值 使 用 IEEE 754 标准 格式 存储 ， 使 用 64 位 来 存储 一 个 数值 的 浮 点 数 表示 形式 ， 该 格式 
在 JS 中 被 同时 用 来 表示 整数 与 浮 点 数 ; 当 值 改变 时 ， 可 能 会 频繁 发 生 整 数 与 浮 点 数 之 间 的 格 
式 转换 。 而 类 型 化 数组 则 允许 存储 并 操作 八 种 不 同 的 数值 类 型 : 


8 位 有 符号 整数 (int8 ) 
8 位 无 符号 整数 (uint8 ) 
16 位 有 符号 整数 (int16) 
16 位 无 符号 整数 (uint16 ) 
32 位 有 符号 整数 (int32 ) 
32 位 无 符号 整数 (Uint32) 
32 位 浮 点 数 (float32 ) 
64 位 浮 点 数 (float64 ) 


ON Oar 一 


如 果 你 将 一 个 int8 范围 内 的 数 表示 为 常规 的 JS 数值 ， 你 就 浪费 了 56 个 位 ， 而 这 些 位 原本 可 
用 来 存储 额外 的 intB 值 、 或 任意 需求 小 于 56 位 的 数值 。 更 有 效 地 利用 "位 ?是 类 型 化 数组 的 处 
理 用 途 之 一 。 


所 有 与 类 型 化 数组 相关 的 操作 和 对 象 都 围绕 着 这 八 种 数据 类 型 。 为 了 使 用 它们 ， 你 首先 需要 
创建 一 个 数组 缓冲 区 用 于 存储 数据 。 


在 本 书 中 ， 我 将 使 用 上 述 列表 中 括号 内 的 缩写 词 来 表示 这 些 类 型 ， 不 过 这 些 缩写 并 不 会 
出 现在 实际 的 JS 代码 中 ， 因 为 它们 仅仅 是 对 超 长 描述 信息 的 速记 。 


数组 缓冲 区 


数组 缓冲 区 (array buffer) 是 内 存 中 包含 一 定数 量 字 节 的 区 域 ， 而 所 有 的 类 型 化 数组 都 基于 
数组 缓冲 区 。 创 建 数 组 缓冲 区 类 似 于 在 C 语言 中 使 用 malloc() 来 分 配 内 存 ， 而 不 需要 指定 
这 块 内 存 包含 什么 。 你 可 以 像 下 例 这 样 使 用 ArrayBuffer 构造 器 来 创 | 建 一 个 数组 缓冲 区 : 


let buffer = new ArrayBuffer(10); // FRI 10 个 字 节 


调用 arrayBuffer 构造 器 时 ， 只 需要 传 入 单个 数值 用 于 指定 缓冲 区 包含 的 字 节 数 ， 而 本 例 就 
创建 了 一 个 10 字 节 的 缓冲 区 。 当 数组 缓冲 区 被 创建 完毕 后 ， 你 就 可 以 通过 检查 byteLength 
属性 来 获取 缓冲 区 的 字 节 数 : 


let buffer = new ArrayBuffer(10); he Mo) Se 
console.log(buffer.byteLength); Hie AUG) 


你 还 可 以 使 用 slice() 方法 来 创建 一 个 包含 已 有 缓冲 区 部 分 eins 
slice() 方法 类 似 于 数组 上 的 同名 方法 ， 可 以 使 用 起 始 位 置 与 结束 位 置 参 数 ， 返 回 由 原 缓 冲 
区 元 素 组 成 的 一 个 新 的 ArrayBuffer 实例 。 例 如 : 


let buffer = new ArrayBuffer(10); // FBT 10 SFP 


let buffer2 = buffer.slice(4, 6); 
console.log(buffer2.byteLength) ; if 2 


此 代码 创建 了 buffer2 KARPE > RRTRAPRRINMAL4SSOSNLR: SRANAMZ 
方法 一 样 ， 结 束 参 数 所 对 应 的 元 素 是 不 会 包含 在 结果 中 的 。 


当然 ， 仅 仅 创 建 一 个 存储 区 域 而 不 能 写 入 数据 ， 没 有 什么 意义 。 你 需要 创建 一 个 视图 
(view) 来 进行 写 入 
数组 缓冲 区 总 是 保持 创建 时 指定 的 字 节 数 ， 你 可 以 修改 其 内 部 的 数据 ， 但 永远 不 能 修改 


使 用 视图 操作 数组 缓冲 区 


数组 缓冲 区 代表 了 一 块 内 存 区 域 ， 而 视图 (views ) 则 是 你 操作 这 块 区 域 的 接口 。 视 图 工作 在 
数组 缓冲 区 或 其 子 集 上 ， 可 以 读 写 菜 种 数值 数据 类 型 的 数据 。 Dataview 类 型 是 数组 绥 冲 区 
的 通用 视图 ， 允 许 你 对 前 述 所 有 八 种 数值 数据 类 型 进行 操作 。 


使 用 Dataview ， 首 先 需 要 创建 ArrayBuffer 的 一 个 实例 ， 再 在 上 面 创 建 一 个 新 的 
ArrayBuffer 视图 。 此 处 有 个 例子 


let buffer = new ArrayBuffer(10), 
view = new DataView(buffer); 


ii 中 的 view 对 象 可 以 使 用 buffer 对 象 的 所 有 10 个 字 节 。 而 你 也 可 以 在 缓冲 区 的 一 个 

分 上 创建 视图 ， 只 需要 指定 可 选 参 数 一 一 字 节 偏 移 量 、 以 及 所 要 包含 的 字 节 数 。 当 未 提供 
ners > 该 Dataview 视图 会 默认 包含 从 偏 移 位 置 开始 、 到 缓冲 区 末尾 为 止 的 元 
素 。 例 如 


let buffer = new ArrayBuffer(10), 
view = new DataView(buffer, 5, 2); // 包含 位 置 5 与 位 置 6 的 字 节 


此 例 中 的 view 只 能 使 用 索引 值 为 5 与 6 的 字 节 。 使 用 这 种 方式 ， 你 可 以 在 同一 个 数组 缓冲 
区 上 创建 多 个 不 同 的 视图 ， 这 样 有 助 于 将 单 块 内 存 区 域 供给 整个 应 用 使 用 ， 而 不 必 每 次 在 有 
需要 时 才 动 态 分 配 内 存 。 


获取 视图 信息 
你 可 以 通过 查询 以 下 只 读 属 性 来 获取 视图 的 信息 : 


© buffer : 该 视图 所 绑 定 的 数组 缓冲 区 ; 

e byteoffset : 传 给 pataview 构造 器 的 第 二 个 参数 ， 如 果 当 时 提供 了 的 话 (默认 值 为 
0) ; 

e byteLength : 传 给 Dataview 构造 器 的 第 三 个 参数 ， 如 果 当 时 提供 了 的 话 (默认 值 为 该 
缓冲 区 的 byteLength 属性 ) 。 


使 用 这 些 属性 ， 你 就 可 以 查 出 所 操作 视图 的 准确 位 置 ， 例 如 : 


let buffer = new ArrayBuffer(10), 





view1 = new DataView(buffer), // 包含 所 有 字 节 

view2 = new DataView(buffer, 5, 2); // 包含 位 置 5 与 位 置 6 的 字 节 
console.log(view1.buffer === buffer); // true 
console.log(view2.buffer === buffer); // true 
console.log(view1.byteOffset); LILO 
console.log(view2.byteOffset) ; ip 
console.log(view1.byteLength); // 10 
console.log(view2.byteLength) ; 12 


此 代码 创建 了 包含 整个 缓冲 区 的 view1 视图 ， 并 创建 了 包含 缓冲 区 一 小 部 分 的 view2 视 
图 。 这 两 个 视图 拥有 相同 的 buffer 属性 值 ， 因 为 它们 是 在 同一 个 数组 缓冲 区 上 工作 的 ; 而 
二 者 的 byteoffset 与 byteLength 属性 就 不 相等 了 ， 这 些 属 性 反映 出 视图 使 用 了 缓冲 区 的 哪 


当然 ， 仅 仅 读 取 缓 冲 区 的 内 存 信息 还 不 够 ， 你 还 需要 能 向 其 写 入 数据 并 重新 读 出 数据 。 
读 取 与 写 入 数据 


对 应 于 JS 所 有 八 种 数值 数据 类 型 ， Dataview 视图 的 原型 分 别提 供 了 区 上 和 写 入 与 
读 取 数 据 的 方法 。 所 有 方法 名 都 以 “set" 或 “get” 开 始 ， 其 后 跟随 着 对 应 数据 类 型 的 缩写 。 下 面 
列 出 了 能 够 操作 int8 或 uint8 类 型 的 读 取 / 写 入 方法 : 


e getInt8(byteOffset, littleEndian) :从 byteoffset 处 开始 读 取 一 个 int8 fal ; 
e setInt8(byteOffset, value, littleEndian) : 从 byteoffset 处 开始 写 入 一 个 int8 值 ; 
© getUint8(byteOffset, littleEndian) : 从 byteOffset 处 开始 读 取 一 个 uint8 值 ; 


e setUint8(byteoffset，value，1LittleEndian) : 从 byteoffset 处 开始 写 入 一 个 uint8 
值 。 


“get" 方 法 接受 两 个 参数 : 开始 进行 读 取 的 字 节 偏 移 量 、 以 及 一 个 可 选 的 布尔 值 ， 后 者 用 于 指 

定 读 取 的 值 是 否 采 用 低 字 节 优 先 方式 (GE: 默认 值 为 false ) 。*“set" 方 法 则 ee Ree 

开始 进行 写 入 的 字 节 偏 移 量 、 需 要 写 入 的 数据 值 、 以 及 一 个 可 选 的 布尔 值 用 于 指定 是 否 采 用 
低 字 节 优 先 方式 存储 数据 。 


pes 注 : MKF PRA (Little-endian) 也 被 翻译 作 “ 小 端 字 节 序 ”， 指 的 是 在 存储 数据 的 多 个 
字 节 中 ， 第 一 个 内 存 字 节 存储 着 数据 的 最 低 字 节 数据 ， 而 最 后 一 个 内 存 字 节 存储 着 


例如 : 十进制 数 5882 用 十 六 进 制 表示 是 16FA ， 如 果 采 用 低 字 节 优 先 方式 、 并 使 用 4 字 
节 ( 即 32 位 ) 存储 ， 则 该 数 Oh Oa CB on Mca 
储 方式 : 高 字 节 优先 (Big-endian， 大 端 字 节 序 ) ， 那 么 该 数字 则 会 被 存储 为 00 00 16 
FA ° 


尽管 上 面 只 列 出 了 操作 8 位 值 的 方法 ， 但 只 要 将 方法 名 中 的 8 BRA 16 或 32 ， 便 可 以 
用 来 操作 16 位 或 32 位 值 。 而 除了 这 些 整数 类 方法 之 外 ， Dataview 也 提供 了 下 列 读 写 方法 
以 便 处 理 浮 点 数 : 


èe getFloat32(byteOffset, littleEndian) : 从 byteOffset 处 开始 读 取 一 个 float32 值 ; 


e setFloat32(byteOffset, value, littleEndian) : 从 byteoffset 处 开始 写 入 一 个 float32 
值 ; 


e getFloat64(byteOffset, littleEndian) : 从 byteoffset 处 开始 读 取 一 个 float64 值 ; 


e setFloat64(byteOffset, value, littleEndian) : 从 byteoffset 处 开始 写 入 一 个 float64 
值 。 


为 了 弄 明白 “set” 与 ‘get 方法 如 何 使 用 ， 可 研究 下 面 的 例子 


let buffer = new ArrayBuffer(2), 
view = new DataView(buffer); 


view.setInt8(0, 5); 
view.setInt8(i, -1); 


console.log(view.getInt8(0)); AS 
console.log(view.getInt8(1)); Li 


该 代码 使 用 一 个 双 字 节 的 数组 缓冲 区 来 存储 两 个 int8 值 。 第 一 个 值 被 存储 在 位 置 0 ， 而 第 二 
个 值 则 被 存储 在 位 置 1 ， 表 示 每 个 值 占用 了 一 个 完整 的 字 节 (8 位 ) ， 此 后 还 使 用 
getinte() 方法 来 将 这 些 值 从 对 应 位 置 读 取出 来 。 尽 管 这 个 例子 只 使 用 了 int8 类 型 的 值 ， 但 
你 却 可 以 使 用 八 种 数值 数据 类 型 的 所 有 对 应 方法 。 


视图 允许 你 使 用 任意 格式 对 任意 位 置 进行 读 写 ， 而 无 须 考虑 这 些 数据 此 前 是 使 用 什么 格式 存 


储 的 ， 这 非常 有 意思 。 例 如 ， 完 全 可 以 向 缓冲 区 写 入 两 个 int8 值 ， 并 将 其 作为 一 个 int16 值 读 
取出 来 ， 如 同 下 面 这 个 例子 : 


let buffer = new ArrayBuffer(2), 
view = new DataView(buffer); 


view.setInt8(0, 5); 
view.setInt8(i, -1); 


console. log(view.getInt16(0)); // 1535 
console.log(view.getInt8(0)); Hil AS, 
console.log(view.getInt8(1)); // -1 


该 代码 使 用 view.getint16(0) 读 取 了 该 视图 的 所 有 字 节 ， 并 将 其 解析 为 数值 1535。 为 了 理 
解 这 个 范例 ， 可 以 参阅 下 面 的 示意 图 ， 它 揭示 了 每 个 setInt8() 操作 对 缓冲 区 造成 的 变化 : 


new ArrayBuffer(2) 0000000000000000 
view.setInt8(0, 5); 0000010100000000 
view. setInt8(1, -1); 0000010111111111 


开始 时 ， 该 数组 缓冲 区 16 个 位 均 为 0 ; 使 用 setinte() 向 第 一 个 字 节 写 入 5 之 后 ， 该 字 
节 的 内 容 就 出 现 了 一 对 1 (因为 5 可 以 写 为 8 位 二 进 制 数 00000101 ) ; 向 第 二 个 字 节 写 入 
-1 会 使 得 该 字 节 的 所 有 位 都 变 成 1 ( 即 -1 的 二 进 制 补 码 形式 ) 。 接 下 来 使 用 getInt16() 就 
能 将 前 面 写 入 的 16 位 数据 以 单个 16 位 整数 的 方式 读 取出 来 ， 其 十 进 制 值 就 是 1535 。 


在 混用 不 同 的 数据 类 型 时 ， 使 用 pataview 对 象 是 一 种 完美 方式 。 不 过 ， 若 仅 想 使 用 特定 的 
一 种 数据 类 型 ， 那 么 特定 类 型 视图 会 是 更 好 的 选择 。 


类 型 化 数组 即 为 视图 


ESG 的 类 型 化 数组 实际 上 也 是 针对 数组 缓冲 区 的 特定 类 型 视图 ， 你 可 以 使 用 这 些 数 组 对 象 来 
处 理 特定 的 数据 类 型 ， 而 不 必 使 用 通用 的 pataview 对 象 。 一 共存 在 八 种 特定 类 型 视图 ， 对 
应 着 八 种 数值 数据 类 型 ， 还 为 处 理 uint8 值 提 供 了 额外 的 选择 。 


特定 类 型 视图 被 包含 在 ES6 规范 的 22.2 小 节 中 ， 下 表 列 出 了 它们 的 概要 : 


g 元 素 大 小 等 价 的 C 语 
构造 器 名 称 ee 描述 
(FF) 言 类 型 
Int8Array 1 8 位 有 符号 整数 ， 采 用 补 码 es 
Uint8Array 1 8 位 无 符号 整数 e 
立 AE A kk : 
ES 1 8 位 无 侍卫 整数 (clamped is Ane 
conversion > 4 ia H 4% 4%) char 
Int16Array 2 16 位 有 符号 整数 ， 采 用 补 码 short 
Uint16Array 2 16 位 无 符号 整数 unsigned 
Short 
Int32Array 4 32 位 有 符号 整数 ， 采 用 补 码 int 
Uint32Array 4 32 位 无 符号 整数 int 
Float32Array 4 32 位 IEEE 浮 点 数 float 
Float64Array 8 64 位 IEEE 浮上 点数 double 


左边 一 列 列 出 了 类 型 化 数组 的 构造 器 ， 而 其 他 列 则 描述 了 对 应 的 类 型 化 数组 所 能 包含 的 数 

据 。 Uint8ClampedArray 的 特性 与 Uint8Array 基本 相 同 ， 只 有 当 缓 冲 区 包含 的 值 小 于 0 或 
者 大 于 255 的 时 候 才 有 区别 : 当 值 小 于 0 时 ， Uint8ClampedArray 会 将 该 值 转换 为 0 进行 存 
fie (例如 -1 会 被 存储 为 0 ) ;而 当 值 大 于 255 时 ， 会 被 转换 为 255 (例如 300 会 被 存储 为 
255 ) 。 


类 型 化 数组 只 能 在 特定 的 一 种 数据 类 型 上 工作 ， 例 如 : Int8Array 的 所 有 操作 都 只 能 处 理 
ints 值 。 每 种 类 型 化 数组 的 单个 元 素 大 小 也 都 取决 于 对 应 类 型 ， Int8Array 中 每 个 元 素 都 
是 单字 节 的 ， 而 Float64Array 则 使 用 了 八 个 字 节 来 存储 单个 元 素 。 幸 运 的 是 ， 类 型 化 数组 的 
元 素 可 以 使 用 数值 型 的 索引 位 置 来 访问 ， 就 像 常 规 数组 那样 ， 从 而 规避 了 使 用 pataview 存 
FLA TK WY AY HE AEH OL o 


元 素 大 小 


中 类 型 化 数组 都 由 一 定数 量 的 元 素 构成 ， 而 “元 素 大 小 ? 则 代表 每 个 类 型 的 单个 元 素 所 
包含 的 字 节 数 。 这 个 数字 被 存储 在 类 型 化 数组 每 个 构造 器 与 每 个 实例 的 
BYTES_PER_ELEMENT 属性 中 ， 方 便 你 查询 元 素 的 大 小 : 


console.log(UInt8Array.BYTES_PER_ELEMENT); Hie al 
console. log(UInt16Array.BYTES_PER_ELEMENT ) ; Mi P2 


let ints = new Int8Array(5); 
console.log(ints.BYTES_PER_ELEMENT); Hip Al, 


创建 特定 类 型 视图 


类 型 化 数组 的 构造 器 可 以 接受 多 种 类 型 的 参数 ， 因 此 存在 几 种 创建 类 型 化 数组 的 方式 。 第 一 
种 方式 是 使 用 与 创建 pataview 时 相同 的 参数 ， 即 : 一 个 数组 缓冲 区 、 一 个 可 选 的 字 节 偏 移 
量 、 以 及 一 个 可 选 的 字 节 数 量 。 例 如 : 


let buffer = new ArrayBuffer(10), 
view1 = new Int8Array(buffer), 
view2 = new Int8Array(buffer, 5, 2); 


console.log(view1.buffer === buffer); 7/7 true 
console.log(view2.buffer === buffer); /erue 
console.log(view1.byteOffset ); if (0) 
console.log(view2.byteOffset ); Hit lS 
console.log(view1.byteLength) ; // 10 
console.log(view2.byteLength) ; Vie 2 


此 代码 在 buffer 对 象 上 创建 了 两 个 Int8Array 类 型 的 视图 : view 与 view2 ， 而 这 两 个 
视图 拥有 相 同 的 buffer ` byteOffset 与 byteLength 属性 。 如 果 你 的 操作 只 针对 一 种 数 
值 类 型 ， 那 么 很 容易 就 能 把 代码 从 使 用 Dataview 视图 切换 到 使 用 某 种 类 型 化 数组 。 


第 二 种 方式 是 传递 单个 数值 给 类 型 化 数组 的 构造 器 ， 此 数值 表示 该 数组 包含 的 元 素数 量 (而 
不 是 分 配 的 字 节 数 ) 。 构 造 器 将 会 创建 一 个 新 的 缓冲 区 ， 分 配 正 确 的 字 节 数 以 便 容纳 指定 数 
以 


量 的 数组 元 素 ， 而 你 也 可 以 使 用 length 属性 来 获取 这 个 元 素数 量 。 例 如 : 


let ints = new Int16Array(2)， 
floats = new Float32Array(5); 


console.log(ints.byteLength); Hd A 
console.log(ints.length); Lif 2 
console.log(floats.byteLength) ; // 20 


console.log(floats.length); Hit © 


示例 中 的 ints 数组 创建 时 包含 了 两 个 元 素 ， 而 每 个 16 位 整数 需要 使 用 两 个 字 节 ， 因 此 该 数 
组 一 共 被 分 配 了 4 个 字 节 。 floats 数组 则 包含 五 个 元 素 ， 每 个 元 素 占 用 四 个 字 节 ， 因 此 它 
就 需要 20 个 字 节 。 这 两 个 数组 都 创建 了 对 应 的 数组 缓冲 区 ， 而 在 必要 时 都 可 以 使 用 buffer 
属性 来 访问 各 自 的 缓冲 区 。 


如 果 调 用 类 型 化 数组 构造 器 时 没有 传 入 参数 ， 构 造 器 会 认为 传 入 了 0 ， 这 种 方式 创建 
的 类 型 化 数组 不 会 被 分 配 任何 存储 空间 ， 因 此 也 就 不 能 被 用 于 保存 数据 。 


第 三 种 方式 是 向 构造 器 传递 单个 对 象 参 数 ， 可 以 是 下 列 四 种 对 象 之 一 : 


© 类 型 化 数组 : 数组 所 有 元 素 都 会 被 复制 到 新 的 类 型 化 数组 中 。 例 如 ， 如 果 你 传递 一 个 int8 
类 型 的 数组 给 Inti6Array 构造 器 ， 这 些 intB 的 值 会 被 复制 到 int16 数组 中 。 新 的 类 型 化 
数组 与 原先 的 类 型 化 数组 会 使 用 不 同 的 数组 绥 冲 区 。 

© TARTA : 该 对 象 的 迭代 器 会 被 调用 以 便 将 数据 插入 到 类 型 化 数组 中 。 如 果 其 中 包含 
了 不 匹配 视图 类 型 的 值 ， 那 么 构造 器 就 会 抛 出 错误 。 

© 数组 : 该 数组 的 元 素 会 被 插入 到 新 的 类 型 化 数组 中 。 如 果 其 中 包含 了 不 匹配 视图 类 型 的 
值 ， 那 么 构造 器 就 会 抛 出 错误 。 

e 类 数组 对 象 : 与 传 入 数组 的 表现 一 致 。 


在 上 述 任意 可 能 中 ， 新 的 类 型 化 数组 都 会 从 原 对 象 获取 数据 。 若 想 用 一 些 值 来 初始 化 一 个 类 
型 化 数组 ， 这 种 方式 就 特别 有 用 ， 就 像 这 样 : 


let ints1 = new Inti6Array([25, 50]), 
ints2 = new Int32Array(ints1); 


console.log(ints1.buffer === ints2.buffer); // false 
console.log(ints1.byteLength) ; V A 
console.log(ints1.length); if P 
console.log(ints1[0]); // 25 
console.log(ints1i[1]); J 150) 
console.log(ints2.byteLength) ; // 8 
console.log(ints2.length); it 2 
console.log(ints2[0]); X25 
console.log(ints2[1]); He 50 


该 例 使 用 了 一 个 包含 两 个 值 的 数组 来 创建 一 个 Inti6Array 并 初始 化 它 ， 之 后 又 利用 该 
Int16Array 创建 了 一 个 Int32Array ° 25 5 50 这 两 个 值 从 ints1 数组 中 被 复制 到 

ints2 数组 中 ， 但 两 个 数组 使 用 了 全 然 不 同 的 缓冲 区 。 虽 然 二 者 都 包含 了 相同 的 数值 ， 但 后 
者 占用 了 8 个 字 节 ， 而 前 者 只 占用 了 4 字 节 。 


类 型 化 数组 与 常规 数组 的 相似 点 


类 型 化 数组 与 常规 数组 有 好 几 个 相似 点 ， 并 且 正 如 你 已 经 在 本 章 看 到 的 那样 ， 在 很 多 场景 中 
都 可 以 像 使 用 常规 数组 那样 使 用 类 型 化 数组 。 例 如 ， 你 可 以 使 用 length 属性 来 获取 类 型 化 
数组 包含 的 元 素数 量 ， 还 可 以 使 用 数值 类 型 的 索引 值 来 直接 访问 类 型 化 数组 的 元 素 。 举 个 例 
Ft: 


let ints = new Inti6Array([25, 50]); 


console.log(ints.length); if PB 
console.log(ints[0]); LL 25 
console.log(ints[1]); // 50 


ints[0] = 1; 
ints[1] = 2; 


console.log(ints[0]); Wik al 
console.log(ints[1]); LU P 


这 段 代码 创建 了 一 个 包含 两 个 元 素 的 Inti6Array ， 使 用 数值 类 型 的 索引 可 以 读 写 对 应 的 
项 ， 而 数值 在 存储 时 会 被 自动 转换 为 int16 类 型 的 值 。 


相似 点 还 不 限于 此 。 


与 常规 数组 不 同 的 是 ， 你 不 能 使 用 length 属性 来 改变 类 型 化 数组 的 大 ， 


ho GRRE 
可 写 的， 在 非 严 格 模式 下 写 入 操作 会 被 忽略 ， 而 严格 模式 下 则 会 抛 出 错误 。 


公共 方法 
类 型 化 数组 也 拥有 大 量 与 常规 数组 等 效 的 方法 ， 你 可 以 对 类 型 化 数组 使 用 下 列 这 些 方法 : 


@ copywithin() 


e entries() 


e fill() 
e filter() 
e find() 


e findIndex() 

e forEach() 

e indexof() 

e join() 

® keys() 

e lastIindexof() 
e map() 

e reduce() 

@ reduceRight() 


© reverse() 


@ slice() 


注意 : 虽然 这 些 方法 与 数组 原型 上 的 对 应 方法 表现 相似 ， 但 它们 并 不 完全 相同 。 类 型 化 数组 
的 方法 会 进行 额外 的 类 型 检查 以 确保 安全 ， 并 且 返 回 值 会 根据 Symbol.species 属性 来 确定 ， 
会 是 某 种 类 型 化 数组 而 非常 规 数 组 。 此 处 有 个 例子 用 于 演示 其 中 的 区 别 


let ints = new Inti6Array([25, 50]), 
mapped = ints.map(v => v * 2); 


console.log(mapped.length) ; If 2 
console.log(mapped[0]); // 50 
console.log(mapped[1]); // 100 


console.log(mapped instanceof Inti6Array); // true 


这 段 代码 通过 map() 方法 使 用 ints 中 的 值 创 建 了 一 个 新 数组 ， 了 映射 函数 将 每 个 值 翻 倍 ， 
并 返回 了 一 个 新 的 Inti6Array ° 


相同 的 迭代 器 


与 常规 数组 相同 ， 类 型 化 数组 也 拥有 三 个 迭代 器 ， 它 们 是 entries() 方法 、 keys) 方法 与 
values() 方法 。 这 就 意味 着 你 可 以 对 类 型 化 数组 使 用 扩展 运算 符 ， 或 者 对 其 使 用 for-of 循 
环 ， 就 像 对 待 常规 数组 。 举 个 例子 : 


let ints = new Inti6Array([25, 50]), 
intsArray = [...ints]; 


console.log(intsArray instanceof Array); // true 
console.log(intsArray[0]); Li 25 
console.log(intsArray[1]); // 50 


此 代码 创建 了 一 个 名 为 intsArray 的 新 数组 ， 包 含 了 类 型 化 数组 ints 的 所 有 数据 。 借 助 扩 
展 运 算 符 能 轻易 地 将 类 型 化 数组 转换 为 常规 数组 ， 就 像 处 理 其 他 可 和 迭代 对 象 那 样 。 


of() 与 from() 方法 


最 后 ， 所 有 的 类 型 化 数组 都 包含 静态 的 of() 与 from() 方法 ， 作 用 类 似 于 Array . ce 与 
Array.from() 方法 。 其 中 的 区 别 是 类 型 化 数组 的 版 本 会 返回 类 型 化 数组 ， 而 不 返回 常规 数 
组 。 下 面 的 例子 使 用 这 两 个 方法 创建 了 几 个 类 型 化 数组 : 


let ints = Inti6Array.of(25, 50), 
floats = Float32Array.from([1.5, 2.5]); 


console.log(ints instanceof Inti6Array); Li enue 
console.log(floats instanceof Float32Array); Le cme 
console.log(ints.length); iif 2 
console.log(ints[0]); 7/25 
console.log(ints[1]); // 50 
console.log(floats.length) ; iif 2 
console.log(floats[0]); Wi Doe 
console.log(floats[1i]); if Bos 


此 例 中 分 别 使 用 了 of() 与 from() 方法 来 创建 一 个 Int16Array 以 及 一 个 Float32Array 
这 两 个 方法 确保 创建 类 型 化 数组 能 像 创 建 常规 数组 那样 轻松 
类 型 化 数组 与 常规 数组 的 区 别 


二 者 最 重要 的 区 别 就 是 类 型 化 数组 并 不 是 常规 数组 ， 类 型 化 数组 并 不 是 从 array 对 象 派生 
的 ， 使 用 Array.isArray() 去 检测 会 返回 false ， 例 如 : 


let ints = new Inti6Array([25, 50]); 


console.log(ints instanceof Array); // false 
console.log(Array.isArray(ints)); // false 


由 于 ints 变量 是 一 个 类 型 化 数组 ， 因 此 它 并 不 是 array 对 象 的 实例 ， 于 是 就 不 会 被 识别 
为 数组 。 这 一 点 区 别 很 重要 ， 因 为 虽然 类 型 化 数组 与 常规 数组 非常 相似 ， 但 前 者 仍然 有 一 些 
不 同 的 行为 。 


行为 差异 


常规 数组 可 以 被 伸展 或 是 收缩 ， 然 而 类 型 化 数组 却 会 始终 保持 自身 大 小 不 变 。 你 可 以 对 常规 
数组 一 个 不 存在 的 索引 位 置 进 和 PE 但 在 类 型 化 数组 上 这 么 做 则 会 被 忽略 。 此 处 有 个 例 
fF: 


let ints = new Intié6Array([25, 50]); 


console.log(ints.length); Wl 
console.log(ints[0]); Mf (DE 
console.log(ints[1]); // 50 
ints[2] = 5; 

console.log(ints.length) ; Ue 2 
console.log(ints[2]); // undefined 


在 本 例 中 ， 尽 管 对 索引 值 2 的 位 置 进行 了 赋值 为 5 的 操作 ， 但 ints 数组 却 完 全 没有 被 伸 
展 ， 数 组 的 长 度 属 性 保持 不 变 ， 所 赋 的 值 也 被 委 弃 了 。 


类 型 化 数组 也 会 对 数据 类 型 进行 检查 以 保证 只 使 用 有 效 的 值 ， 当 无 效 的 值 被 传 入 时 ， 将 会 被 
替换 为 0， 例 如 : 
let ints = new Int1i6Array(["hi"]); 


console.log(ints.length); Hip al 
console.log(ints[0]); // O 


这 段 代码 试图 用 字符 串 值 "hi" 创建 一 个 Inti6Array ， 而 字符 串 对 于 类 型 化 数组 来 说 当然 
是 无 效 的 值 ， 因 此 该 字符 串 被 替换 为 o 并 插入 数组 。 此 数组 的 长 度 仅 仅 是 1， 而 ints[o] 
只 包含 了 o 这 个 值 。 

所 有 在 类 型 化 数组 上 修改 项 目 值 的 方法 都 会 受到 相同 的 限制 ， 例 如 当 map() 方法 使 用 的 映射 
函数 返回 一 个 无 效 值 的 时 候 ， 类 型 化 数组 会 使 用 @ 来 代替 返回 值 : 


let ints = new Int16Array([25, 50]), 
mapped = ints.map(v => "hi"); 


console.log(mapped.length) ; Wik P 
console.log(mapped[0]); // 0 
console.log(mapped[1]); // 0 


console.log(mapped instanceof Inti6Array); // true 
console.log(mapped instanceof Array); // talse 


由 于 字符 串 值 "hi" 并 不 是 一 个 16 位 整数 ， 它 在 结果 数组 中 就 被 替换 成 为 o 。 多 亏 这 种 纠 
潜行 为 ， 类 型 化 数组 的 内 容 永 远 不 会 是 无 效 值 ， 因 此 相关 方法 就 无 须 再 担心 传 入 无 效 值 会 导 
致 错误 。 


W AR I Y ik 


e concat() 


e pop() 
e push() 
e shift() 


@ Splice() 


e unshift() 


除了 concat() 方法 之 外 ， 该 列表 中 的 其 余 方法 都 会 改变 数组 的 大 小 ， 而 由 于 类 型 化 数组 的 
大 小 不 可 变 ， 因 此 这 些 方法 都 不 能 作用 于 类 型 化 数组 。 concat() 方法 不 可 用 的 原因 则 是 : 
连接 两 个 类 型 化 数组 的 结果 是 不 确定 的 (特别 是 当 它 们 处 理 的 数据 类 型 不 同时 ) ， 这 种 不 确 
定 情况 原本 就 不 应 当 使 用 类 型 化 数组 。 


附加 的 方法 


最 后 ， 类 型 化 数组 还 有 两 个 常规 数组 所 不 具备 的 方法 : set() 方法 与 subarray() 方法 。 这 
两 个 方法 作用 相反 : set() 方法 从 其 他 数组 中 复制 元 素 到 当前 的 类 型 化 数组 ， 而 
subarray() 方法 则 是 将 当前 类 型 化 数组 的 一 部 分 提取 为 新 的 类 型 化 数组 。 


set() 方法 接受 一 个 数组 参数 (无论 是 类 型 化 的 还 是 常规 的 ) 、 以 及 一 个 可 选 的 偏 移 量 参 
数 ， 后 者 指示 了 从 什么 位 置 开始 插入 数据 (默认 值 为 0 ) 。 数 组 参数 中 的 数据 会 被 复制 到 目 
标 类 型 化 数组 中 ， 并 会 确保 数据 值 有 效 。 此 处 有 个 例子 : 


let ints = new Inti6Array(4); 


ints.set([25, 50]); 
ints.set([75, 100], 2); 


console.log(ints.toString()); // 25,50,75,100 


这 段 代码 创建 了 一 个 包含 四 个 元 素 的 Intl6Array ; 第 一 次 调用 set 复制 了 两 个 值 到 数组 
起 始 的 两 个 位 置 ; 而 第 二 次 调用 set() 则 使 用 了 一 个 值 为 2 的 偏 移 量 参数 ， 指 明 应 当 从 数 
组 的 第 三 个 位 置 〈 索 引 2 ) 开始 放置 所 复制 的 数据 。 


subarray() 方法 接受 一 个 可 选 的 开始 位 置 索引 参数 s 以 及 一 个 可 选 的 结束 位 置 索 引 参 数 ( 像 
slice() 方法 一 样 ， 结 束 位 置 的 元 素 不 会 被 包含 在 结果 中 ) ， 并 会 返回 一 个 新 的 类 型 化 数 
组 。 你 可 以 同时 省 略 这 两 个 参数 ， 从 而 创建 原 类 型 化 数组 的 一 个 复制 品 。 例 如 : 


let ints = new Intié6Array([25, 50, 75, 100]), 


subints1 = ints.subarray(), 


subints2 = ints.subarray(2), 


subints3 ints.subarray(i, 3); 


console.log(subints1.toString()); 1/1257 50,157 LOO 
console.log(subints2.toString()); // 75,100 
console.log(subints3.toString()); Elf HOV TES 


本 例 中 利用 ints 数组 创建 了 三 个 类 型 化 数组 。 subints1 数组 是 ints 的 一 个 复制 品 ， 包 
含 了 原 数 组 的 所 有 信息 ; 而 subints2 则 从 原 数组 的 索引 2 位 置 开 始 复 制 ， 因 此 包含 了 原 数 
组 的 最 末 两 个 元 素 (P755 100) ;最 后 的 subints3 数组 值 包 含 了 原 数组 的 中 间 两 个 元 
素 ， 因 为 调用 subarray() 时 同时 使 用 了 起 始 位 置 与 结束 位 置 参数 。 


s 


as 


g a 


ES6 延续 了 ESS 的 工作 以 便 让 数组 更 加 有 用 。 新 增 了 两 种 创建 数组 的 方式 : array.of() 7 
法 、 以 及 Array.from() 方法 ， 后 者 可 以 将 可 和 迭代 对 象 或 类 数组 对 象 转 换 为 正规 数组 。 这 两 个 
方法 都 在 数组 派生 对 象 上 被 继承 ， 并 使 用 symbol.species 属性 来 决定 返回 的 数组 类 型 ， 而 其 
他 的 继承 方法 在 返回 数组 时 也 会 使 用 该 属性 。 


此 外 还 有 几 个 新 增 的 数组 方法 。 filo 方法 与 copywithin() Yo 
素 。 find() 方法 与 findIndex() 方法 在 3 数组 中 查找 满足 特定 条 件 的 元 素 时 会 非常 有 用 ， 
中 前 者 会 返回 满足 条 件 的 第 一 个 元 素 ， 而 后 者 会 返回 该 元 素 的 索引 位 置 。 


严格 来 说 类 型 化 数组 并 不 是 数组 ， 它 们 并 没有 继承 array 对 象 ， 但 它们 的 外 观 和 行为 都 与 数 

组 有 许多 相似 点 。 类 型 化 数组 包含 的 数据 类 型 是 八 种 数值 数据 类 型 之 一 ， 基 于 数组 缓冲 区 对 

ee 
生 能 ， 因 为 它 不 像 JS 的 常规 数值 类 型 那样 需要 频繁 进行 格式 转换 。 


第 十 一 章 Promise 与 异步 编程 


JS 最 强大 的 一 方面 就 是 它 能 极其 轻 多 地 处 理 异 步 编 程 。 作 为 因 互联 网 而 生 的 语言 ，JS 从 一 
开始 就 必须 能 够 响应 点 击 或 按键 之 类 的 用 户 交 互 行为 。Node.js 通过 使 用 回调 函数 来 代替 事 
件 ， 进 一 步 推动 了 JS 中 的 异步 编程 。 随 着 越 来 越 多 的 程序 开始 使 用 异步 编程 ， 事 件 与 回调 函 
数 已 不 足以 支持 开发 者 的 所 有 需求 。 Promise 正 是 为 了 解决 这 方面 的 问题 。 


Promise 是 异步 编程 的 另 一 种 选择 ， 它 的 工作 方式 类 似 于 在 其 他 语言 中 进行 延迟 并 在 将 来 执 
行 作业 。 一 个 Promise 指定 一 些 稍 后 phan 《就 像 事 件 与 回调 函数 一 样 ) > HF 
确 标 示 了 作业 的 代码 是 否 执行 成 功 。 你 能 以 成 功 处 理 或 失败 处 理 为 基准 ， 将 Promise 串联 在 
一 起 ， 让 代码 更 易 理解 、 更 易 调 试 。 


不 过 为 了 更 好 理解 Promise 是 如 何 工作 的 ， 重 要 的 是 理解 建立 它 所 依据 的 一 些 基本 概念 。 


网 异步 编程 TE. 背景 
o 事件 模型 
o 回调 模式 
e Promise 基础 
o Promise 的 生命 周期 
o 创建 未 处 理 的 Promise 
o 创建 已 处 理 的 Promise 
m 使 用 Promise.resolve() 
a 使 用 Promise.reject() 
= 3} Promise 的 Thenable 
o 执行 器 错误 
e 全 局 的 Promise 拒绝 处 理 
o Node.js 的 拒绝 处 理 
o 浏览 器 的 拒绝 处 理 
e 串联 Promise 
o 捕获 错误 
o 在 Promise 链 中 返回 值 
o 在 Promise 链 中 返 
e 响应 多 个 Promise 
o Promise.all() 方法 
o Promise.race() 方法 


回 Promise 


e 继承 Promise 
© 异步 任务 运行 


JS 引擎 建立 在 单线 程 事件 循 环 的 概念 上 。 单 线程 ( Single-threaded ) 意味 着 同一 时 刻 只 能 
执行 一 段 代码 ， 与 Java 或 C++ 这 种 允许 同时 执行 多 段 不 同 代 码 的 多 线程 语言 形成 了 反差 。 
多 段 代码 可 以 同时 访问 或 修改 状态 ， 维 护 并 保护 这 些 状态 就 变 成 了 难题 ， 这 也 是 基于 多 线程 
的 软件 中 出 现 bug 的 常见 根源 之 一 。 


JS 引擎 在 同一 时 刻 只 能 执行 一 段 代码 ， 所 以 引擎 无 须 留意 那些 “可 能 "运行 的 代码 。 代 码 会 被 
放置 在 作业 队列 (job queue) 中 ， 每 当 一 段 代码 准备 被 执行 ， 它 就 会 被 添加 到 作业 队列 。 
当 JS 引擎 结束 当前 代码 的 执行 后 ， 事 件 循环 就 会 执行 队列 中 的 下 一 个 作业 。 事 件 循 环 ( 
event loop ) 是 JS 引擎 的 一 个 内 部 处 理 进程 ， 能 监视 代码 的 执行 并 管理 作业 队列 。 要 记 住 
既然 是 一 个 队列 ， 作 业 就 会 从 队列 中 的 第 一 个 开始 ， 依 次 运行 到 最 后 一 个 。 


事件 模型 


当 用 户 点 击 一 个 按钮 或 按 下 键 瘟 上 的 一 个 键 时 ， 一 个 事件 〈 event ) 一 一 例如 onclick 一 一 
就 被 触发 了 。 该 事件 可 能 会 对 此 交互 进行 响应 ， 从 而 将 一 个 新 的 作业 添加 到 作业 队列 的 尾 

部 。 这 就 是 JS 关于 异步 编程 的 最 基本 形式 。 事 件 处 理 程序 代码 直到 事件 发 生 后 才 会 被 执行 ， 
此 时 它 会 拥有 合适 的 上 下 文 。 例 如 : 


let button = document.getElementById("my-btn"); 

button.onclick = function(event) { 
console.log("Clicked"); 

J; 


a > console.log("Clicked") 直到 button 被 点 击 后 才 会 被 执行 。 当 button 被 点 
> 赋值 给 onclick 的 函数 就 被 添加 到 作业 队列 的 尾部 ， 并 在 队列 前 部 所 有 任务 结束 之 后 再 
° 


事件 可 以 很 好 地 工作 于 简单 的 交互 ， 但 将 多 个 分 离 的 异步 调用 串联 在 一 起 却 会 很 麻烦 ， 因 为 

必须 追踪 每 个 事件 的 事件 对 象 〈 例 如 上 例 中 的 button ) 。 此 外 ， 你 还 需 确保 所 有 的 事件 处 

理 程序 都 能 在 事件 第 一 次 触发 之 前 被 绑 定 完毕 。 例 如 ， 若 button 在 onclick MARL ZAR 

被 点 击 ， 那 就 不 会 有 任何 事 发 生 。 因 此 虽然 在 响应 用 户 交互 或 类 似 的 低频 功能 时 ， 事 件 很 有 
但 它 在 面 对 更 复杂 的 需求 时 仍然 不 够 灵活 。 


回调 模式 


当 Node.js 被 创建 后 ， 它 通过 普及 回调 函数 编程 模式 提升 了 异步 编程 模型 。 回 调 函 数 模式 类 
似 于 事件 模型 ， 因 为 异步 代码 也 会 在 未 来 的 时 间 点 才 执 行 。 不 同 之 处 在 于 需要 调用 的 函数 
(BPE HA) 是 作为 参数 传 入 的 ， 如 下 所 示 : 


readFile("example.txt", function(err, contents) { 
if (err) { 
throw err; 


} 


console.log(contents); 


}); 


console.log("Hi!"); 


此 例 使 用 了 Node.js 惯例 ， 即 错误 优先 ( error-first ) 的 回调 函数 风格 。 readFile() BA 
用 于 读 取 由 第 一 个 参数 指定 的 磁盘 文件 ， 并 在 读 取 完 毕 后 执行 回调 函数 ( 即 第 二 个 参数 ) 。 
如 果 存 在 错误 ， 回 调 函数 的 err 参数 会 是 一 个 错误 对 象 ; 否则 contents 参数 就 会 以 字符 串 
形式 包含 文件 内 容 。 


使 用 回调 函数 模式 ， readFile() 会 立即 开始 执行 ， 并 在 开始 读 取 磁 盘 时 暂停 。 这 意味 着 

console.log("Hi!") 会 在 readFile() 被 调用 后 立即 进行 输出 ， 要 昱 于 

console.log(contents) 的 打印 操作 。 当 readFile() 结束 操作 后 ， 它 会 将 回调 函数 以 及 相关 
ee aera 添加 到 作业 队列 的 尾部 。 在 之 前 的 作业 全 部 结束 后 ， 该 作业 才 会 执 


o 


> 


回调 函数 模式 要 比 事件 模型 灵活 得 多 ， 因 为 使 用 回调 函数 串联 多 个 调用 会 相对 容易 。 例 如 : 


readFile("example.txt", function(err, contents) { 
if (err) { 
throw err; 


} 


writeFile("example.txt", function(err) { 
if (err) { 
throw err; 


} 


console.log("File was written!"); 
}); 
}); 


在 此 代码 中 ， 对 于 Sear 的 一 次 成 功 调用 引出 了 另 一 个 异步 调用 ， 即 调用 

writeFile() 有 函数 。 注 意 这 两 个 函数 都 使 用 了 检查 err 的 同一 基本 模式 。 当 readFile() 执 
于 结束 后 ， 它 添加 一 个 作业 到 作业 队列 ， 假 设 没 有 出 现 错误 ， writeFile() 会 在 之 后 被 调 

用 。 接 下 来 ， writeFile() 也 会 在 执行 结束 后 向 队列 添加 一 个 作业 。 


这 种 模式 运作 得 相当 好 ， 但 当 襄 套 过 多 回调 函数 时 ， 你 可 能 会 迅速 察觉 陷入 了 回调 地 狱 ( 
callback hell ) ， 就 像 这 样 


method1(function(err，result) { 
if (err) { 
throw err; 
} 
method2(function(err, result) { 
if (err) { 
throw err; 


} 


method3(function(err, result) { 
if (err) { 
throw err; 


} 


method4(function(err, result) { 
if (err) { 


throw err; 


} 


method5(result) ; 
}); 


DE 
3); 
3); 
像 本 例 一 样 襄 套 多 个 方法 调用 会 创建 错综复杂 的 代码 ， 会 难以 理解 与 调试 。 当 想 要 实现 更 复 
杂 的 功能 时 ， 回 调 函 数 也 会 存在 问题 : 若 想 让 两 个 异步 操作 并 行 运行 ， 并 且 在 它们 都 结束 后 


提醒 你 ， 那 该 怎么 做 ? 若 想 同时 启动 两 个 异步 操作 ， 但 只 采用 首 个 结束 的 结果 ， 那 又 该 怎么 
做 ? 


在 这 些 情况 下 ， 你 需要 追踪 多 个 回调 函数 并 做 清理 操作 ，Promise 能 大 幅度 改善 这 种 情况 。 


Promise 基础 


Promise 是 为 异步 操作 的 结果 所 准备 的 占 位 符 。 函 数 可 以 返回 一 个 Promise， 而 不 必 订 阅 一 个 
事件 或 向 函数 传递 一 个 回调 参数 ， 就 像 这 样 : 


// readFile 承诺 会 在 将 来 某 个 时 间 点 完成 


let promise = readFile("example.txt"); 


在 此 代码 中 ， readFile() 实际 上 并 未 立即 开始 读 取 文 件 ， 这 将 会 在 稍 后 发 生 。 此 函数 会 返 
回 一 个 Promise 对 象 以 表示 异步 读 取 操 作 ， 因 此 你 可 以 在 将 来 再 操作 它 。 你 能 对 结果 进行 操 
作 的 确切 时 刻 ， 完 全 取决 于 Promise 的 生命 周期 是 如 何 进行 的 。 


Promise 的 生命 周期 


每 个 Promise 都 会 经 历 一 个 短暂 的 生命 周期 ， 初 始 为 进行 态 ( pending state) ， 这 表示 异步 
操作 尚未 结束 。 一 个 进行 中 的 Promise 也 被 认为 是 未 处 理 的 ( unsettled) 。 上 个 例子 中 的 
Promise 在 readFile() 哆 数 返回 它 的 时 候 就 是 处 在 进行 态 。 一 旦 异步 操作 结束 ，Promise 
就 会 被 认为 是 已 处 理 的 〈 settled ) ， 并 进入 两 种 可 能 状态 之 一 : 


1. CZA (fulfilled ) : Promise 的 异步 操作 已 成 功 结束 ; 
2. 已 拒绝 (rejected ) : Promise 的 异步 操作 未 成 功 结束 ， 可 能 是 一 个 错误 ， 或 由 其 他 原 
导致 。 


内 部 的 [[Promisestate]] 属性 会 被 设置 为 "pending" ` "fulfilled" 或 "rejected" ， 以 
反映 Promise 的 状态 。 该 属性 并 未 在 Promise 对 象 上 被 暴露 出 来 ， 因 此 你 无 法 以 编程 方式 判 
Wf Promise 到 底 处 于 哪 种 状态 。 不 过 你 可 以 使 用 then) 方法 在 Promise 的 状态 改变 时 执行 
一 些 特定 操作 。 


译注 : 相关 词汇 翻译 汇总 


Promise 是 相对 比较 新 的 一 个 概念 ， 相 关 的 许多 词汇 有 一 定 的 交叉 性 ， 并 且 有 些 在 翻译 
为 中 文 时 可 能 并 不 太 容 易 分 辩 。 因 此 涉及 Promise 的 许多 资料 都 对 相关 大 部 分 词汇 不 作 
翻译 ， 直 接 使 用 英文 原 词 。 


译 者 在 本 章 斗 胆 对 几乎 所 有 词汇 进行 了 翻译 ， 如 有 不 妥 ， 欢 迎 指 出 。 此 处 是 词汇 翻译 的 
汇总 ， 以 便 参 考 : 


1. pending : 进行 ， 表 示 未 结束 的 Promise 状态 。 相 关 词 汇 * 进 行 态 ”。 

2. fulfilled : 已 完成 ， 表 示 已 成 功 结束 的 Promise 状态 ， 可 以 理解 为 “成功 完成 ”。 相 关 

3. rejected : 已 拒绝 ， 表 示 已 结束 但 失败 的 Promise KA ° 48 K 74 IL “4B 2” > “PAB 
绝 "\、“ 拒 绝 态 ”。 

4. resolve : 决议 ， 表 示 将 Promise 推 向 成 功 态 ， 可 以 理解 为 “决议 通过 "”， 在 Promise 
概念 中 与 “完成 "是 近义词 。 相 关 词 汇 “ 决 议 态 "、“ 已 决议 ”、“ 被 决议 ”。 

5. unsettled : 未 处 理 ， 或 者 称 为 “未 解决 *， 表 示 Promise 尚未 被 完成 或 拒绝 ， 与 “ 挂 
起 "是 近义词 。 

6. settled : 已 处 理 ， 或 者 称 为 “已 解决 *， 表示 Promise 已 被 完成 或 拒绝 。 注 意 这 与 “已 
完成 "或 “已 决议 "不同 ，“ 已 处 理 ” 的 状态 也 可 能 是 “拒绝 态 ”( 已 失败 ) 。 

7. fulfillment handler : ZARE HA > T Promise 为 完成 态 时 会 被 调用 的 函数 。 

8. rejection handler : 拒绝 处 理 函 数 ， 表 示 Promise 为 拒绝 态 时 会 被 调用 的 函数 。 


QOL 


then() 方法 在 所 有 的 Promise 上 都 存在 ， 并 且 接 受 两 个 参数 。 第 一 个 参数 是 Promise 被 完 
成 时 要 调用 的 函数 ， 与 异步 操作 关联 的 任何 附加 数据 都 会 被 传 入 这 个 完成 函数 。 第 二 个 参数 
则 是 Promise 被 拒绝 时 要 调用 的 函数 ， 与 完成 函数 相似 ， 拒 绝 函 数 会 被 传 入 与 拒绝 相关 联 的 
任何 附加 数据 。 


用 这 种 方式 实现 then() 方法 的 任何 对 象 都 被 称 为 一 个 thenable 。 所 有 的 Promise 都 
Æ thenable ， 反 之 则 未 必 成 立 。 


传递 给 then() 的 两 个 参数 都 是 可 选 的 ， 因 此 你 可 以 监听 完成 与 拒绝 的 任意 组 合 形式 。 例 
如 ， 研 究 这 组 then() 调用 : 


let promise = readFile("example.txt"); 


promise.then(function(contents) { 
// 完成 
console.log(contents); 

}, function(err) { 
// 拒绝 
console.error(err.message) ; 


3); 


promise.then(function(contents) { 
// 完成 
console.log(contents); 


}); 


promise.then(null, function(err) { 
// 拒绝 
console.error(err.message); 


3); 
这 三 个 then) 调用 都 操作 在 同一 个 Promise 上 。 第 一 个 调用 同时 监听 了 完成 与 失败 ; 第 二 
个 调用 只 监听 了 完成 ， 错 误 不 会 被 报告 ; 第 三 个 则 只 监听 了 拒绝 ， 并 不 报告 成 功 信 息 。 


Promis 也 具有 一 个 cath) 方法 ， 其 行为 等 同 于 只 传递 拒绝 处 理 函 数 给 then() 。 例 如 ， 
以 下 的 catch() 与 then) 调用 是 功能 等 效 的 。 


promise.catch(function(err) { 


// 42% 
console.error(err.message); 
H); 
// aE 


promise.then(null, function(err) { 
// 拒绝 
console.error(err.message); 


3); 


then() 与 catch() 背后 的 意图 是 让 你 组 合 使 用 它们 来 正确 处 理 蜡 步 操作 的 结果 。 这 个 体系 
让 操作 是 成 功 还 是 失败 变 得 完全 清晰 ， 要 优 于 事件 与 回调 函数 ， 事 件 模式 倾向 于 在 出 错时 不 
被 触发 ， 而 在 回调 函数 模式 中 你 必须 始终 记得 检查 错误 参数 。 关 于 Promise 需要 牢记 的 只 
A: 若 你 未 提供 拒绝 处 理 函 数 ， 所 有 的 错误 就 会 静默 发 生 。 建 议 始 终 附加 一 个 拒绝 处 理 郊 
数 ， 即 使 该 处 理 程序 只 是 用 于 打印 错误 日 志 。 


即使 完成 或 拒绝 处 理 函 数 在 Promise 已 经 被 处 理 之 后 才 添 加 到 作业 队列 ， 它 们 仍然 会 被 执 
了 于。 这 人 允许 你 随时 添加 新 的 完成 或 拒绝 处 理 函 数 ， 并 保证 它们 会 被 调用 。 例 如 


let promise = readFile("example.txt"); 


// FR 38 09 FE RAL E BH A 
promise.then(function(contents) { 
console.log(contents); 


// 现在 添加 另 一 个 
promise.then(function(contents) { 
console.log(contents); 
}); 
}); 


在 此 代码 中 ， 完 成 处 理 函 数 又 为 同一 个 Promise 添加 了 另 一 个 完成 处 理 郊 数 。 这 个 Promise 
已 经 完成 了 ， 因 此 新 的 处 理 程序 就 被 添加 到 任务 队列 ， 并 在 就 绪 时 (前面 的 作业 执行 完 
毕 后 ) 被 调用 。 拒 绝 处 理 函 数 使 用 同样 方式 工作 。 


pipe then() 或 catch() 都 会 创建 一 个 新 的 作业 ， 它 会 在 Promise 已 处 理 时 被 执 

o 但 这 些 作 业 最 终 会 进入 一 个 完全 为 Promise 保留 的 作业 队列 。 这 个 独立 队列 的 确切 
a 对 于 理解 如 何 使 用 Promise 是 不 重要 的 ， 你 只 需 理解 作业 队 ne 通常 来 说 是 如 何 工作 
的 。 


创建 未 处 理 的 Promise 


新 的 Promise 使 用 promise 构造 器 来 创建 。 此 构造 器 接受 单个 参数 : 一 个 被 称 为 执行 器 ( 
executor ) 的 函数 ， 包 含 初 始 化 Promise 的 代码 。 ail 器 会 被 传递 两 个 名 为 resolve() 
与 reject() 的 函数 作为 参数 。 resolve() 函数 在 执行 器 成 功 结束 时 被 调用 ， 用 于 示意 该 
Promise 已 经 准备 好 被 决议 ( resolved ) ， oe 的 操作 失败 后 reject() 函数 则 被 调 
用 。 


此 处 有 个 范例 ， 在 Node.js 中 使 用 了 一 个 Promise ， 实 现 了 本 章 前 面 的 readFile() BWA: 


// Node.js 范例 


let fts = Mequare( fs 


function readFile(filename) { 
return new Promise(function(resolve, reject) { 


// 触发 异步 操作 


fs.readFile(filename, { encoding: "utf8" }, function(err, contents) { 


// 检查 错误 

if (err) { 
reject(err); 
return, 

} 

// 读 取 成 功 


resolve(contents); 


3); 


let promise = readFile("example.txt"); 


// 同时 监听 完成 与 拒绝 

promise.then(function(contents) { 
// 完成 
console.log(contents); 

}, function(err) { 
// 拒绝 
console.error(err.message) ; 


3); 


在 此 例 中 ，Node.js 原生 的 fs.readFile() AFAMAR LR E—* Promise 中 。 执 行 器 要 么 
传递 错误 对 象 给 reject() 函数 ， 要 么 传递 文件 内 容 给 resolve() 函数 。 


= 


要 记 住 执行 器 会 在 readFile() 被 调用 时 立即 运行 。 当 resolve() 或 reject() 在 执行 器 内 
部 被 调用 时 ， 一 个 作业 被 添加 到 作业 队列 中 ， 以 便 处 理 这 个 Promise 。 这 被 称 为 作业 调度 ( 
job scheduling ) ， 若 你 曾 用 过 setTimeout() 或 setInterval() 函数 ， 那 么 应 该 已 经 熟悉 
这 种 方式 。 在 作业 调度 中 ， 你 添加 新 作业 到 队列 中 是 表示 :“ 不 要 立刻 执行 这 个 作业 ， 但 要 在 
稍 后 执行 它 ”。 例如， setTimeout() 函数 能 让 你 指定 一 个 延迟 时 间 ， 延 迟 之 后 作业 才 会 被 添 
加 到 队列 : 


= Promises 4+ Y 4a 42 


// 在 500 毫秒 之 后 添加 此 函数 到 作业 队列 

setTimeout(function() { 
console.log("Timeout"); 

}, 500); 


console.log("Hi!"); 


此 代码 安排 一 个 作业 在 500 毫秒 之 后 被 添加 到 作业 队列 。 此 处 两 个 console.1log() 调用 产生 
了 以 下 输出 : 


Hi! 


Timeout 


多 亏 这 500 毫秒 的 延迟 ， 被 传递 给 settimeout() 的 匿名 函数 的 输出 ， 被 排 在 了 
console.log("Hi!") 输出 之 后 。 


译注 : 实际 上 前 面 范例 中 的 输出 顺序 与 500 毫秒 的 延 时 没有 关系 ， 而 与 setTimeout() 
的 机 制 有 关 。 我 们 可 以 把 延 时 改 为 0， 依然 会 得 到 相同 的 结果 : 

// 在 日 毫秒 之 后 添加 此 函数 到 作业 队列 

setTimeout(function() { 


console.log("Timeout"); 
3, 9); 


console rogu Hani 


输出 结果 会 保持 不 变 。 setTimeout() 确实 有 延 时 效果 ， 但 原 书 的 例子 不 当 ， 没 有 完全 
说 清 其 中 的 机 制 。 
Promise 工作 方式 与 之 相似 。 Promise 的 执行 器 会 立即 执行 ， 早 于 源 代 码 中 在 其 之 后 的 任何 
代码 。 例 如 : 


let promise = new Promise(function(resolve, reject) { 
console. log("Promise"); 
resolve(); 


3); 


console.log("Hi!"); 


此 代码 的 输出 结果 为 : 


Promise 
Hi! 


调用 resolve() 触发 了 一 个 异步 操作 。 传 递 给 then() 与 catch() 的 函数 会 异步 地 被 执 
行 ， 并 且 它 们 也 被 添加 到 了 作业 队列 《先进 队列 再 执行 ) 。 此 处 有 个 例子 : 


let promise = new Promise(function(resolve, reject) { 
console.log("Promise") ; 
resolve(); 


3); 


promise.then(function() { 
console.log("Resolved."); 


3); 


console.log("Hi!"); 


此 例 的 输出 结果 为 : 


Promise 
Hi! 


Resolved 


注意 : 天 尽管 对 EE OA he EEE hire ee 它 实际 上 稍 后 才 会 执 
(与 执行 器 中 那 行 "promise" 不 同 ) 。 这 是 因为 完成 处 理 函 数 与 拒绝 处 理 函 数 总 是 会 在 执 
器 的 操作 结束 后 被 添加 到 作业 队列 的 尾部 。 


创建 已 处 理 的 Promise 


基于 Promise 执行 器 行为 的 动态 本 质 ， Promise 构造 器 就 是 创 建 未 处 理 的 Promise 的 最 好 
方式 。 但 若 你 想 让 一 个 Promise 代表 一 个 已 知 的 值 ， 那 么 安排 一 个 单纯 传 值 给 resolve() & 
数 的 作业 并 没有 意义 。 相 反 ， 有 两 种 方法 可 使 用 指定 值 来 创建 已 处 理 的 Promise 。 


使 用 Promise.resolve() 


Promise.resolve() 方法 接受 单个 参数 并 会 返回 一 个 处 于 完成 态 的 Promise 。 这 意味 着 没有 
任何 作业 调度 会 发 生 ， 并 且 你 需要 向 Promise 添加 一 个 或 更 多 的 完成 处 理 函 数 来 提取 这 个 参 
数值 。 例 如 : 


let promise = Promise.resolve(42); 


promise.then(function(value) { 
console.log(value); // 42 


}); 


此 代码 创建 了 一 个 已 完成 的 Promise ， 因 此 完成 处 理子 数 就 接收 到 42 作为 value 参数 。 若 
— MIE 46 2b FE BH RAS Ao BI] YL Promise ， 该 拒绝 处 理 函 数 将 永 不 会 被 调用 ， 因 为 此 Promise 
绝 不 可 能 转变 为 拒绝 态 。 


使 用 Promise.reject() 

你 也 可 以 使 用 promise.reject() 方法 来 创建 一 个 已 拒绝 的 Promise 。 此 方法 像 

Promise.resolve() 一 样 工 作 ， 区 别 是 被 创建 的 Promise 处 于 拒绝 态 ， 如 下 : 
let promise = Promise.reject(42); 


promise.catch(function(value) { 
console.log(value); // 42 


3); 


任何 附加 到 这 个 Promise 的 拒绝 处 理 函 数 都 将 会 被 调用 ， 而 完成 处 理 函 数 则 不 会 执行 。 


若 你 传递 一 个 Promise 给 Promise.resolve() 方法 ， 该 Promise 会 不 作 修改 原样 返回 。 


非 Promise 的 Thenable 


Promise.resolve() 与 Promise.reject() 都 能 接受 非 Promise 的 thenable 作为 参数 。 当 传 
入 了 非 Promise 的 thenable 时 ， 这 些 方法 会 创建 一 个 新 的 Promise ， 此 Promise 会 在 
then() 函数 之 后 被 调用 。 


当 一 个 对 象 拥 有 一 个 能 接受 resolve 与 reject 参数 的 then() 方法 ， 该 对 象 就 会 被 认为 是 
一 个 非 Promise 的 thenable ， 就 像 这 样 : 


let thenable = { 
then: function(resolve, reject) { 
resolve(42); 


} 
}; 


此 例 中 的 thenable 对 象 ， 除 了 thno 方法 之 外 没有 任何 与 Promise 相关 的 特征 。 你 可 以 
调用 Promise.resolve() 来 将 thenable 转换 为 一 个 已 完成 的 Promise : 


let thenable = { 
then: function(resolve, reject) { 
resolve(42); 
} 
}; 


let p1 = Promise.resolve(thenable) ; 
pi.then(function(value) { 
console.log(value) ; // 42 


3); 


在 此 例 中 ， Promise.resolve() 调用 了 thenable.then() ? 确定 了 这 个 thenable 的 
Promise 状态 : 由 于 resolve(42) 在 thenable.then() 方法 内 部 被 调用 ， 这 个 thenable 的 
Promise 状态 也 就 被 设 为 已 完成 。 一 个 名 为 pi 的 新 Promise 被 创建 为 完成 态 ， 并 从 
thenable 中 接收 到 了 值 (此 处 为 42 ) > Fe p 的 完成 处 理 函 数 就 接收 到 一 个 值 为 42 的 
参数 。 


使 用 promise.resolve() ， 同 样 还 能 从 一 个 thenable 创建 一 个 已 拒绝 的 Promise : 


let thenable = { 
then: function(resolve, reject) { 
reject(42); 
} 
}; 


let p1 = Promise.resolve(thenable) ; 
pi.catch(function(value) { 
console.log(value); // 42 


}); 


此 例 类 似 于 上 例 ， 区 别 是 此 处 的 thenable 被 拒绝 了 。 当 thenable.then() 执行 时 ， 一 个 处 
于 拒绝 态 的 新 Promise 被 创建 ， 并 伴随 着 一 个 值 ( 42 ) 。 这 个 值 此 后 会 被 传递 给 pl 的 拒 
绝 处 理 函 数 。 


Promise.resolve() 与 Promise.reject() 用 类 似 方式 工作 ， 让 你 能 轻易 处 理 非 Promise 的 
thenable ° # Promise 被 引入 ES6 之 前 ， 许 多 库 都 使 用 了 thenable ， 因 此 将 thenable 转换 
为 正规 Promise 的 能 力 就 非常 重要 了 ， 能 对 之 前 已 存在 的 库 提供 向 下 兼容 。 当 你 不 能 确定 一 
个 对 象 是 否 是 Promise 时 ， 将 该 对 象 传递 给 Promise.resolve() 或 Promise.reject() ( 取 
决 于 你 的 预期 结果 ) CHEV AR: AAA RE Promise 只 会 被 直接 传递 出 来 ， 并 不 
会 被 修改 (但 请 注意 前 面 译注 提 到 的 特殊 情况 ) 。 


如 果 在 执行 器 内 部 抛 出 了 错误 ， 那 么 Promise 的 拒绝 处 理 函 数 就 会 被 调用 。 例 如 : 


let promise = new Promise(function(resolve, reject) { 
throw new Error("Explosion!"); 


3); 


promise.catch(function(error) { 
console.log(error.message); // "Explosion!" 


3); 


在 此 代码 中 ， 执 行 器 故意 抛 出 了 一 个 错误 。 此 处 在 每 个 执行 器 之 中 存在 隐 式 的 try-catch ， 
因此 错误 就 被 捕捉 并 传递 给 了 拒绝 处 理子 数 。 这 个 例子 等 价 于 : 


let promise = new Promise(function(resolve, reject) { 
try { 
throw new Error("Explosion!"); 
} catch (ex) { 
reject(ex); 
} 
}); 


promise.catch(function(error) { 
console.log(error.message); // “Explosion!" 


3); 


执行 器 处 理 程序 捕捉 了 抛 出 的 任何 错误 ， 以 简化 这 种 常见 处 理 。 但 在 执行 器 内 抛 出 的 错误 仅 
当 存 在 拒绝 处 理 函 数 时 才 会 被 报告 ， 否 则 这 个 错误 就 会 被 隐瞒 。 这 在 开发 者 早期 使 用 
Promise 的 时 候 是 一 个 问题 ， 不 过 JS 环境 通过 提供 钧 子 ( hook ) 来 捕捉 被 拒绝 的 Promise 
， 从 而 解决 了 此 问题 。 


全 局 的 Promise 拒绝 处 理 

Promise 最 有 争议 的 方面 之 一 就 是 : 当 一 个 Promise 被 拒绝 时 若 缺 少 拒绝 处 理 函 数 ， 就 会 静 
默 失败 。 有 人 认为 这 是 规范 中 最 大 的 缺陷 ， 因 为 这 是 JS 语言 所 有 组 成 部 分 中 唯一 未 使 错误 清 
晰 可 见 的 。 


由 于 Promise 的 本 质 ， 并 不 能 直观 判断 一 个 Promise 的 拒绝 是 否 已 被 处 理 。 例 如 ， 研 究 以 下 
示例 : 


let rejected = Promise.reject(42); 


// 在 此 刻 rejected 不 会 被 处 理 

7 pl 

rejected.catch(function(value) { 
// 现在 rejected 已 经 被 处 理 了 
console.log(value); 


}); 


无 论 Promise 是 否 已 被 解决 ， 你 都 可 以 在 任何 时 候 调 用 then() 或 catch() 并 使 它们 正确 


工作 ， 这 导致 很 难 准 确 知 道 一 个 Promise 何 时 会 被 处 理 。 此 例 中 的 Promise 被 立刻 拒绝 ， 但 
它 后 来 才 被 处 理 。 


虽然 下 个 版 本 的 ES 可 能 会 处 理 此 问题 ， 不 过 浏览 器 与 Node.js 已 经 实施 了 变更 来 解决 开发 者 


的 这 个 痛 点 。 这 些 变 更 不 是 ES6 规范 的 一 部 分 ， 但 却 是 使 用 Promise 时 的 宝贵 工具 。 


Node.js 的 拒绝 处 理 
在 Node.js 中 ， process 对 象 上 存在 两 个 关联 到 Promise 的 拒绝 处 理 的 事件 : 


e unhandledRejection : 当 一 个 Promise 被 拒绝 、 而 在 事件 循环 的 一 个 轮 次 中 没有 任何 拒 
绝 处 理 函 数 被 调用 ， 该 事件 就 会 被 触发 ; 


e rejectionHandled : 若 一 个 Promise 被 拒绝 、 并 在 事件 循环 的 一 个 轮 次 之 后 再 有 拒绝 处 
理 函 数 被 调用 ， 该 事件 就 人 被 触发 。 


这 两 个 事件 旨 在 共同 帮助 识别 已 被 拒绝 但 未 曾 被 处 理 promise 。 


unhandledRejection 事件 处 理 函 数 接受 的 参数 是 拒绝 原因 (常常 是 一 个 错误 对 象 ) 以 及 已 被 
拒绝 的 Promise 。 以 下 代码 展示 了 unhandledRejection 的 应 用 : 


let rejected; 
process.on("unhandledRejection", function(reason, promise) { 
console.log(reason.message) ; // "Explosion!" 
console.log(rejected === promise); // true 
3); 
rejected = Promise.reject(new Error("Explosion!")); 
此 例 创 建 了 一 个 带 有 错误 对 象 的 已 被 拒绝 的 Promise ， 并 监听 了 unhandledRejection 事件 。 
事件 处 理 函 数 接收 了 该 错误 对 象 作为 第 一 个 参数 ， 原 Promise 则 是 第 二 个 参数 。 


rejectionHandled 事件 处 理 函 数 则 只 有 一 个 参数 ， 即 已 被 拒绝 的 Promise 。 例 如 


let rejected; 


process.on("rejectionHandled", function(promise) { 
console.log(rejected === promise); // true 


}); 
rejected = Promise.reject(new Error("Explosion!")); 


// 延迟 添加 拒绝 处 理 函 数 
setTimeout(function() { 
rejected.catch(function(value) { 
console.log(value.message) ; // "Explosion!" 


3); 
}, 1000); 


此 处 的 rejectionHandled 事件 在 拒绝 处 理 函 数 最 终 被 调用 时 触发 。 若 在 rejected 被 创建 后 
直接 将 拒绝 处 理 函 数 附 加 到 它 上 面 ， 那 么 此 事件 就 不 会 被 触发 。 因 为 立即 附加 的 拒绝 处 理 函 
数 在 rejected 被 创建 的 事件 循环 的 同一 个 轮 次 内 就 会 被 调用 ， 这 样 rejectionHandled 就 不 
会 起 作用 。 


为 了 正确 追踪 潜在 的 未 被 处 理 的 拒绝 ， 使 用 rejectionHandled 与 unhandledRejection 事件 
就 能 保持 包含 这 些 Promise 的 一 个 列表 ， 之 后 等 待 一 段 时 间 再 检查 此 列表 。 例 如 : 


let possiblyUnhandledRejections = new Map(); 


// 当 一 个 拒绝 未 被 处 理 ， 将 其 添加 到 map 
process.on("unhandledRejection", function(reason, promise) { 
possiblyUnhandledRejections.set(promise, reason); 


}); 


process.on("rejectionHandled", function(promise) { 
possiblyUnhandledRejections.delete(promise) ; 


}); 
setInterval(function() { 


possiblyUnhandledRejections.forEach(function(reason, promise) { 
console.log(reason.message ? reason.message : reason); 


// 做 点 事 来 处 理 这 
handleRejection(promise, reason); 





3); 


possiblyUnhandledRejections.clear(); 


}, 60000); 


是 针对 未 处 理 的 拒绝 的 简单 追踪 器 。 它 使 用 了 一 个 Map 来 储存 Promise 及 其 拒绝 原因 ， 
每 个 Promise 都 是 键 ， 而 它 的 拒绝 原因 就 是 相关 的 值 。 每 当 unhandledRejection 被 触发 ， 
Promise 及 其 拒绝 原因 就 会 被 添加 到 此 Map 中 。 而 每 当 rejectionHandled 被 触发 ， 已 被 处 
理 的 Promise 就 会 从 这 个 Map 中 被 移 除 。 这 样 一 来 ， possiblyunhandledRejections 就 会 随 
着 事件 的 调用 wa 或 收缩 ae 的 调用 会 定期 检查 这 个 列表 ， BAT A EE 未 被 处 
理 的 拒绝 ， 并 将 其 信息 输出 到 控制 台 (在 现实 情况 下 ， 你 可 能 会 想 做 点 别 的 事情 ， 以 便 记 录 
或 处 理 该 拒绝 ) 。 了 Map 而 不 是 Weak Map ， 这 是 因为 你 需要 定期 检查 此 
Map 来 查看 哪些 Promise 存在 ， 而 这 是 使 用 Weak Map 所 无 法 做 到 的 。 


尽管 此 例 仅 针 对 Node.js ， 但 浏览 器 也 实现 了 类 似 的 机 制 来 将 未 处 理 的 拒绝 通知 给 开发 者 。 


浏览 器 的 拒绝 处 理 
浏览 器 同样 能 触发 两 个 事件 ， 来 帮助 识别 未 处 理 的 拒绝 。 这 两 个 事件 会 被 window HAR 
发 ， 并 完全 等 效 于 Node.js 的 相关 事件 : 


e unhandledrejection : 当 一 个 Promise 被 拒绝 、 而 在 事件 循环 的 一 个 轮 次 中 没有 任何 拒 
绝 处 理 函 数 被 调用 ， 该 事件 就 会 被 触发 ; 

e rejectionHandled : 若 一 个 Promise 被 拒绝 、 并 在 事件 循环 的 一 个 轮 次 之 后 再 有 拒绝 处 
理子 数 被 调用 ， 该 事件 就 会 被 触发 。 


Node.js 的 实现 会 传递 分 离 的 参数 给 事件 处 理 函 数 ， 而 浏览 器 事件 的 处 理 函 数 则 只 会 接收 到 色 
含 下 列 属性 的 一 个 对 象 : 


© type : 事件 的 名 称 【 "unhandledrejection" 或 "rejectionhandled" 13 
e promise :被 拒绝 的 Promise 对 象 ; 
e reason : Promise 中 的 拒绝 值 (拒绝 原因 ) 。 


浏览 器 的 实现 中 存在 的 另 一 个 差异 就 是 : 拒绝 值 ( reason ) 在 两 种 事件 中 都 可 用 。 例 如 
let rejected; 


window.onunhandledrejection = function(event) { 


console.log(event.type) ; // “unhandledrejection" 
console.log(event.reason.message) ; // "Explosion!" 
console.log(rejected === event.promise) ; //7 true 


}; 


window.onrejectionhandled = function(event) { 


console.log(event.type); // "“rejectionhandled" 
console.log(event.reason.message) ; // "Explosion!" 
console.log(rejected === event.promise); 7/7 true 


}; 


rejected = Promise.reject(new Error("Explosion!")); 


此 代码 使 用 了 DOM 0 级 写法 的 onunhandledrejection 与 onrejectionhandled ， 对 两 个 事件 
处 理 函 数 都 进行 了 赋值 ( 若 你 喜欢 ， 也 可 以 使 用 addEventListener("unhandledrejection") 与 
addEventListener("rejectionhandled" ) ) ° 每 个 事件 处 理 函 数 都 接收 一 个 事件 对 象 2 其 中 包 
含 与 被 拒绝 的 Promise 有 关 的 信息 ” type `~ promise 与 reason 属性 都 可 用 9 


以 下 代码 在 浏览 器 中 追踪 未 被 处 理 的 拒绝 ， 与 Node.js 的 代码 非常 相似 : 


let possiblyUnhandledRejections = new Map(); 


// 当 一 个 拒绝 未 被 处 理 ， 将 其 添加 到 map 
window.onunhandledrejection = function(event) { 
possiblyUnhandledRejections.set(event.promise, event.reason); 


}; 


window.onrejectionhandled = function(event) { 
possiblyUnhandledRejections.delete(event.promise) ; 


}; 
setInterval(function() { 


possiblyUnhandledRejections.forEach(function(reason, promise) { 
console.log(reason.message ? reason.message : reason); 


// RR FAL HK BEE HE 
handleRejection(promise, reason); 
}); 


possiblyUnhandledRejections.clear(); 


}, 60000); 


这 个 实现 与 Node.js 的 实现 几乎 一 模 一 样 。 使 用 了 相同 方法 在 Map 中 存储 Promise 及 其 拒绝 
值 ， 并 在 此 后 进行 检查 。 唯 一 丫 正 的 区 别 就 是 在 事件 处 理 函 数 中 信息 是 从 何 处 被 提取 出 来 
的 。 


处 理 Promise 的 拒绝 可 能 很 麻烦 ， 但 你 才刚 开始 见识 Promise 实际 上 到 底 有 多 强大 。 现 在 是 
时 候 更 进一步 了 ， 把 几 个 Promise 串联 在 一 起 用 用 看 。 


串联 Promise 


到 此 为 止 ，Promise 貌似 不 过 是 在 组 合 使 用 回调 函数 与 setTimeout() 函数 ， 并 进行 了 增 量 
改进 ， 然 而 Promise 的 内 容 远 比 表面 上 所 看 到 的 更 多 。 更 确切 地 说 ， 存 在 多 种 方式 来 将 
Promise 串联 在 一 起 ， 以 完成 更 复杂 的 异步 行为 。 


每 次 对 then() 或 catch() 的 调用 实际 上 创建 并 返回 了 另 一 个 Promise ， 仅 当前 一 个 
Promise 被 完成 或 拒绝 时 ， 后 一 个 Promise 才 会 被 处 理 。 研 究 以 下 例子 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


pi.then(function(value) { 
console.log(value); 

}).then(function() { 
console.log("Finished"); 


3); 


此 代码 输出 : 


42 
Finished 


对 p1.then() 的 调用 返回 了 第 二 个 Promise ， 又 在 这 之 上 调用 了 then) 
Promise 已 被 决议 后 ， 第 二 个 then() 的 完成 处 理 函 数 才 会 被 调用 。 假 若 1 
串联 ， 它 看 起 来 就 会 是 这 样 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


let p2 = pi.then(function(value) { 
console.log(value); 


}) 


p2.then(function() { 
console.log("Finished"); 


3); 


。 仅 当 第 一 个 
你 在 此 例 中 不 使 用 


在 这 个 无 串联 版 本 的 代码 中 ” pl.then() 的 结果 被 存储 在 p2 中 ? 并 且 随 后 p2.then() 被 
调用 ， 以 添加 最 终 的 完成 处 理 函 数 。 正 如 你 可 能 已 经 猜 到 的 ， 对 于 p2.then() 的 调用 也 返回 


了 一 个 Promise ， 只 是 本 例 未 使 用 此 Promise 。 


捕获 错误 


Promise 链 允 许 你 捕获 前 一 个 Promise 的 完成 或 拒绝 处 理 函 数 中 发 生 的 错误 。 例 如 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


pi.then(function(value) { 
throw new Error("Boom!"); 
}).catch(function(error) { 
console.log(error.message) ; // "Boom!" 


3); 


在 此 代码 中 ， pi 的 完成 处 理 函 数 抛 出 了 一 个 错误 ， 链 式 调 用 指向 了 第 二 个 Promise 上 的 
catch() 方法 ， 能 通过 此 拒绝 处 理 函 数 接收 前 面 的 错误 。 若 是 一 个 拒绝 处 理 函 数 抛 出 了 错 
误 ， 情 况 也 是 一 样 : 


let pi = new Promise(function(resolve, reject) { 
throw new Error("Explosion!"); 


}); 


pi.catch(function(error) { 
console.log(error.message); // "Explosion!" 
throw new Error("Boom!"); 

}).catch(function(error) { 
console.log(error.message) ; // "Boom!" 


3); 


此 处 的 执行 器 抛 出 了 一 个 错误 ， 就 触发 了 pi 这 个 Promise 的 拒绝 处 理 函 数 ， 该 处 理 函 数 随 
后 抛 出 了 另 一 个 错误 ， 并 被 第 二 个 Promise 的 拒绝 处 理 函 数 所 捕获 。 链 式 Promise 调用 能 察 
觉 到 链 中 其 他 Promise 中 的 错误 。 


为 了 确保 能 正确 处 理 任意 可 能 发 生 的 错误 ， 应 当 始 终 在 Promise 链 尾 部 添加 拒绝 处 理 函 


数 。 


在 Promise 链 中 返回 值 


Promise 链 的 另 一 重要 特性 是 能 从 一 个 Promise 传递 数据 给 下 一 个 Promise 。 前 面 已 看 到 ， 
传递 给 执行 器 中 的 resolve() 处 理 辑 数 的 参数 ， 会 被 传递 给 对 应 Promise 的 完成 处 理 函 数 。 
你 可 以 指定 完成 处 理 函 数 的 返回 值 ， 以 便 沿 着 一 个 链 继 续 传 递 数据 。 例 如 : 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


pi.then(function(value) { 
console.log(value); [if NAVEEN 
return value + 1; 

}).then(function(value) { 
console.log(value) ; AS 


H); 


pl 的 完成 处 理 函 数 在 被 执行 时 返回 了 value + 1 。 由 于 value 的 值 为 42 (来 自 执行 
R) ， 此 完成 处 理 函 数 就 返回 了 43 。 这 个 值 随后 被 传递 给 第 二 个 Promise 的 完成 处 理 函 数 ， 
并 被 其 输出 到 控制 台 。 


你 能 对 拒绝 处 理 函 数 做 相同 的 事 。 当 一 个 拒绝 处 理 函 数 被 调用 时 ， 它 也 能 返回 一 个 值 。 如 果 
这 么 做 ， 该 值 会 被 用 于 完成 下 一 个 Promise ， 就 像 这 样 : 


let pi = new Promise(function(resolve, reject) { 
reject(42); 
}); 


pi.catch(function(value) { 
// 第 一 个 完成 处 理 函数 
console.log(value) ; NA 
return value + 1; 
}).then(function(value) { 
// 第 三 个 完成 处 理 函 数 
console.log(value) ; AS 


}); 


此 处 的 执行 器 使 用 42 调用 了 reject() ， 该 值 被 传递 到 这 个 Promise 的 拒绝 处 理 函 数 中 ， 从 
中 又 返回 了 value + 1 。 尽 管 后 一 个 返回 值 是 来 自 拒绝 处 理 函 数 ， 它 仍然 被 用 于 链 中 下 一 个 
Promise 的 完成 处 理 函 数 。 若 有 必要 ， 一 个 Promise 的 失败 可 以 通过 传递 返回 值 来 恢复 整个 

Promise 链 。 


在 Promise 链 中 返回 Promise 


从 完成 或 拒绝 处 理 函 数 中 返回 一 个 基本 类 型 值 ， 能 够 在 Promise 之 间 传 递 数据 ， 但 若 你 返回 
的 是 一 个 对 象 呢 ? 若 该 对 象 是 一 个 Promise ， 那 么 需要 采取 一 个 额外 步骤 来 决定 如 何 处 理 。 
研究 以 下 例子 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


let p2 = new Promise(function(resolve, reject) { 
resolve(43); 


}); 


pi.then(function(value) { 
// 第 一 个 完成 处 理 函 数 
console.1log(value); // 42 
return p2,; 
}).then(function(value) { 
// 第 三 个 完成 处 理 函 数 
console.log(value); Use ks} 
}); 


在 此 代码 中 ， p 安排 了 一 个 决议 42 的 作业 ， pi 的 完成 处 理 函 数 返 回 了 一 个 已 处 于 决议 
态 的 Promise : p2 ° WF p 已 被 完成 ， 第 二 个 完成 处 理 函 数 就 被 调用 了 。 而 若 p2 被 
拒绝 ， 会 调用 可 能 存在 的 拒绝 处 理 函 数 ， 而 不 调用 第 二 个 完成 处 理 函 数 。 


关于 此 模式 需 认识 的 首要 重点 是 第 二 个 完成 处 理 函 数 并 未 被 添加 到 p2 上 ， 而 是 被 添加 到 第 
三 个 Promise o 正 因 如 此 党 上 个 例子 就 等 价 于 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


let p2 = new Promise(function(resolve, reject) { 
resolve(43); 


let p3 = pi.then(function(value) { 
// 第 一 个 完成 处 理 函 数 
console.log(value) ; // 42 
return p2,; 


3); 


p3.then(function(value) { 
// 第 三 个 完成 处 理 函 数 
console.log(value) ; // 43 
H); 


此 处 清楚 说 明了 第 二 个 完成 处 理 函 数 被 附加 给 p3 而 不 是 p 。 这 是 一 个 细微 但 重要 的 区 
Blo AAS p2 被 拒绝 ， 则 第 二 个 完成 处 理 函 数 就 不 会 被 调用 。 例 如 : 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


let p2 = new Promise(function(resolve, reject) { 
reject(43); 
}); 


pi.then(function(value) { 
// 第 一 个 完成 处 理 函 数 
console.log(value) ; // 42 
return p2,; 

}).then(function(value) { 
// 第 二 个 完成 处 理 函 数 
console.log(value); // 永 不 被 调用 


3); 


在 此 例 中 ， 由 于 p 被 拒绝 了 ， 第 二 个 完成 处 理 函 数 就 永 不 被 调用 。 不 过 你 可 以 改 为 对 其 
加 一 个 拒绝 处 理 函 数 : 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


}); 


let p2 = new Promise(function(resolve, reject) { 
reject(43); 
}); 


pi.then(function(value) { 
// 第 一 个 完成 处 理 函数 
console.log(value) ; // 42 
return p2; 
}).catch(function(value) { 
// 拒绝 处 理 函 数 
console.1log(value); // 43 
}); 


此 处 p2 被 拒绝 ， 导 致 拒绝 处 理 函 数 被 调用 ， 来 自 p2 的 拒绝 值 43 会 被 传递 给 拒绝 处 理 函 
数 。 

从 完成 或 拒绝 处 理 函 数 中 返回 thenable ， 不 会 对 Promise 执行 器 何 时 被 执行 有 所 改变 。 第 一 
个 被 定义 的 Promise 将 会 首先 运行 它 的 执行 器 ， 接 下 来 才 轮 到 第 二 个 Promise 的 执行 器 执 

了 ， 以 此 类 推 。 返 回 thenable 只 是 让 你 能 在 Promise eee 。 你 能 通过 在 完 
ee 数 中 创建 一 个 新 的 Promise ， 来 推迟 完成 处 理 函 数 的 执行 。 例 如 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


pi.then(function(value) { 
console.log(value); // 42 


// 创建 一 个 新 的 promise 
let p2 = new Promise(function(resolve, reject) { 
resolve(43); 


3); 


return p2 
}).then(function(value) { 

console.log(value); // 43 
3); 


在 此 例 中 ， 一 个 新 的 Promise 在 pi he KPA HE BHP ROE o RERKA AF p 被 完成 之 
后 ， 第 二 个 完成 处 理 函 数 才 会 执行 。 若 你 想 等 待 前 面 的 Promise 被 解决 ， 之 后 才 去 触发 另 一 
个 Promise ， ° 


响应 多 个 Promise 


本 章 至 今 的 每 个 例子 在 同一 时 刻 都 只 响应 一 个 Promise 。 然 而 有 时 你 会 想 监 视 多 个 Promise 
的 进程 ， 以 便 决 定 下 一 步行 动 。 ES6 提供 了 能 监视 多 个 Promise 的 两 个 方法 : 


Promise.all() 与 Promise.race() ° 


Promise.all() 方法 


Promise.all() FIREMAN TR R (如 数组 ) 作为 参数 ， 并 返回 一 个 Promise 。 这 个 


迭代 对 象 的 元 素 都 是 Promise ， 只 有 在 它们 都 完成 后 ， 所 返回 的 Promise 才 会 被 完成 。 例 
如 : 


译注 : 原文 在 此 处 有 和 貌似 重复 的 描述 ， 相 似 的 话语 用 被 决议 (resolved ) ` 被 完成 
fulfilled ) 这 两 个 术语 说 了 两 次 ， 而 这 两 个 词 在 Promise 中 基本 是 同一 个 意思 g 文 
MTP o 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


let p2 = new Promise(function(resolve, reject) { 
resolve(43); 


let p3 = new Promise(function(resolve, reject) { 
resolve(44); 


}); 


let p4 = Promise.all([pi, p2, p3]); 


p4.then(function(value) { 
console.log(Array.isArray(value)); // true 


console.log(value[0]); // 42 
console.log(value[1]); // 43 
console.log(value[2]); // 44 


3); 


此 处 前 面 的 每 个 Promise 都 用 一 个 数值 进行 了 决议 ， 对 pPromise.all() 的 调用 创建 了 新 的 
Promise p4 ， 在 p 、 p2 与 p3 都 被 完成 后 ， pa 最 终 会 也 被 完成 。 传 递 给 pa HH 
成 处 理 函 数 的 结果 是 一 个 包含 每 个 决议 值 ( 42 、43 与 44 ) 的 数组 ， 这 些 值 的 存储 顺序 保 
持 了 待 决 议 的 Promise 的 顺序 (与 完成 的 先后 顺序 无 关 ) ， 因 此 你 可 以 将 结果 匹配 到 每 个 
Promise 。 


若 传递 给 promise.all() 的 任意 Promise 被 拒绝 了 了， 那么 方法 所 返回 的 Promise 就 会 立刻 被 
拒绝 ， 而 不 必 等 待 其 他 的 Promise 结 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


let p2 = new Promise(function(resolve, reject) { 
reject(43); 
3); 


let p3 = new Promise(function(resolve, reject) { 
resolve(44); 


3); 
let p4 = Promise.all([p1, p2, p3]); 


p4.catch(function(value) { 
console.log(Array.isArray(value) ) // false 
console.log(value) ; // 43 


3); 


在 此 例 中 ， p2 被 使 用 数值 43 进行 了 拒绝 ， 则 pa 的 拒绝 处 理 函 数 就 立刻 被 调用 ， 而 不 会 
等 待 pl 或 ps 结束 执行 《它们 仍然 会 各 自 结束 执行 ， 只 是 pa 不 等 它们 ) 。 


拒绝 处 理 函 数 总 会 接收 到 单个 值 ， 而 不 是 一 个 数组 ， 该 值 就 是 被 拒绝 的 Promise 所 返回 的 拒 
绝 值 。 本 例 中 的 拒绝 处 理 函 数 被 传 入 了 43 ， 反 映 了 来 自 p2 的 拒绝 。 


Promise.race() 方法 


Promise.race() 提供 了 监视 多 个 Promise 的 一 个 稍微 不 同 的 方法 。 此 方法 也 接受 一 个 包含 需 
监视 的 Promise 的 可 先 代 对 象 ， 并 返回 一 个 新 的 Promise ， 但 一 旦 来 源 Promise 中 有 一 个 被 
解决 ， 所 返回 的 Promise 就 会 立刻 被 解决 。 与 等 待 所 有 Promise 完成 的 promise.all() 方法 
不 同 ， 在 来 源 Promise 中 任意 一 个 被 完成 时 ， Promise.race() 方法 所 返回 的 Promise 就 能 
作出 响应 。 例 如 : 


let p1 = Promise.resolve(42); 


let p2 = new Promise(function(resolve, reject) { 
resolve(43); 


}); 


let p3 = new Promise(function(resolve, reject) { 
resolve(44); 


}); 
let p4 = Promise.race([p1, p2, p3]); 


p4.then(function(value) { 
console.log(value); // 42 


3); 


在 此 代码 中 ， pl 被 创 sata Promise ， 而 其 他 的 Promise 则 需要 调度 作业 。 

p4 的 完成 处 理 函 数 被 使 用 数值 42 进行 了 调用 ， 并 忽略 了 其 他 的 Promise 。 传 递 给 
Promise.race() 的 Promise 确实 在 进 Cae ， 看 哪 一 个 首先 被 解决 。 若 胜出 的 Promise 是 被 
完成 ， 则 返回 的 新 Promise 也 会 被 完成 ; 而 胜出 的 Promise 若是 被 拒绝 ， 则 新 Promise 也 会 
被 拒绝 。 此 处 有 个 使 用 拒绝 的 范例 : 


let pi = new Promise(function(resolve, reject) { 
resolve(42); 


let p2 = Promise.reject(43); 


let p3 = new Promise(function(resolve, reject) { 
resolve(44); 
3); 


let p4 = Promise.race([p1, p2, p3]); 


p4.catch(function(value) { 
console.log(value); // 43 
}); 


此 处 的 pa 被 拒绝 了 ， 因 为 p2 在 promise.race() 被 调用 时 已 经 处 于 拒绝 态 。 尽 管 pi 与 
p3 都 被 完成 ， 其 结果 仍然 被 忽略 ， 因 为 这 发 生 在 p2 被 拒绝 之 后 。 


译注 : 此 处 范例 有 误 。 
在 各 个 浏览 器 中 的 测试 结果 都 是 没有 任何 输出 ; MEA p4 添加 一 个 类 似 的 完成 处 理 函 
数 ， 则 会 输出 42 。 这 表示 在 赛跑 中 胜出 的 是 p 而 不 是 p2 ° 
如 果 要 让 此 范例 正确 ， 应 当 在 pi 与 p3 内 部 的 resolve() 上 添加 延 时 处 理 。 例 如 
let pi = new Promise(function(resolve, reject){ 
setTimeout (function(){ 
resolve(42); 


fe ONG 
}); 


由 于 在 源 代码 中 ， pa 位 于 p2 之 后 ， 因 此 仅 修改 pr 也 可 以 。 


继承 Promise 


正 像 其 他 内 置 类 型 ， 你 可 将 一 个 Promise 用 作 派 生 类 的 基 类 。 这 允许 你 自 定义 变异 的 
Promise ， 在 内 置 Promise 的 基础 上 扩展 功能 。 例 如 ， 假 设 你 想 创建 一 个 可 以 使 用 
success() 与 failure() 方法 的 Promise ， 对 常规 的 then) 与 catch() 方法 进行 扩展 ， 
可 以 像 下 面 这 样 创建 该 Promise 类 型 : 


class MyPromise extends Promise { 


success(resolve, reject) { 
return this.then(resolve, reject); 


} 


failure(reject) { 
return this.catch(reject); 


} 


} 


let promise = new MyPromise(function(resolve, reject) { 
resolve(42); 


3); 


promise.success(function(value) { 
console.log(value) ; // a2 

}).failure(function(value) { 
console.log(value) ; 


}); 


在 此 例 中 ， Mypromise 从 Promise 上 派生 出 来 ， 并 拥有 两 个 附加 方法 。 success() 方法 模 
拟 了 resolve() ， failure() 方法 则 模拟 了 reject() ° 


每 个 附加 方法 都 使 用 了 this 来 调用 它 所 模拟 的 方法 。 派 生 的 Promise 函数 与 内 置 的 
Promise 几乎 一 样 ， 除 了 多 出 来 的 success() 与 failure() 方法 。 


由 于 静态 方法 被 继承 了 ， MyPromise.resolve() 方法 、 MyPromise.reject() 方法 、 
MyPromise.race() 方法 与 MyPromise.all() 方法 在 派生 的 Promise 上 都 可 用 。 后 两 个 方法 的 
行为 等 同 于 内 置 的 方法 ， 但 前 两 个 方法 则 有 轻微 的 不 同 。 


MyPromise.resolve() 与 MyPromise.reject() 都 会 返回 MyPromise 的 一 个 实例 ， 无 视 传 递 进 
来 的 值 的 类 型 ， 这 是 由 于 这 两 个 方法 使 用 了 Symbol.species 属性 ( 详 见 第 九 章 ) 来 决定 需要 
返回 的 Promise 的 类 型 。 若 传递 内 置 Promise 给 这 两 个 方法 ， 将 会 被 决议 或 被 拒绝 ， 并 且 会 
返回 一 个 新 的 MyPromise ” 以 便 绑 定 完成 或 拒绝 处 理 函 数 。 例 如 : 


let p1 = new Promise(function(resolve, reject) { 
resolve(42); 


3); 


let p2 = MyPromise.resolve(p1); 
p2.success(function(value) { 

console.log(value) ; // 42 
}); 


console.log(p2 instanceof MyPromise); // true 


此 处 的 pi 是 一 个 内 置 的 Promise ， 被 传递 给 了 mypromise.resolve() 方法 。 作 为 结果 的 
p2 是 MyPromise 的 一 个 实例 ， 来 自 pl 的 决议 值 被 传递 给 了 p2 的 完成 处 理 函 数 。 


ah 


7z MyPromise 的 一 个 实例 被 传递 给 了 MyPromise.resolve() 或 MyPromise.reject() 方法 ， 
它 会 在 未 被 解决 的 情况 下 就 被 直接 返回 。 在 其 他 情况 下 ， 这 两 个 方法 的 行为 都 会 等 同 于 


Promise.resolve() 5 Promise.reject() ° 


异步 任务 运行 
R 


在 第 八 章 中 ， 我 介绍 了 生成 器 ， 并 向 你 展示 了 如 何 使 用 它 来 运行 异步 任务 ， 就 像 这 样 


let fs = require("fs"); 
function run(taskDef) { 


// 创建 近代 器 ， 让 它 在 别处 可 用 
let task = taskDef(); 


// 开始 任务 
let result = task.next(); 


// 递归 使 用 函数 来 保持 对 next() 的 调用 
function We q 





// 如 果 还 有 更 多 
if (!result.done) { 
if (typeof result.value === "function") { 


result.value(function(err, data) { 
if (ene) rt 
result = task.throw(err); 


return, 
} 
result = task.next(data); 
step(); 
}); 
} else { 


result = task.next(result.value); 


step(); 


} 
} 
} 
// 开始 处 理 过 程 
step(); 
} 
// 定义 一 个 函数 来 配合 任务 运行 器 使 用 


function readFile(filename) { 
return function(callback) { 
fs.readFile(filename, callback); 


}; 


// ES 


run(function*() { 
let contents = yield readFile("config.json"); 
doSomethingwWith(contents) ; 
console.log("Done"); 


3); 
此 实现 存在 一 些 痛 点 。 首 先 ， 将 每 个 函数 包 庄 在 另 一 个 函数 内 、 再 返回 一 个 新 函数 ， 这 可 能 
会 把 人 摘 蛙 ， 实 际 上 这 和 旬 话 本 身 就 已 经 # 混乱 了 。 p ， AEEA ARARAT > AAIE 
方法 可 以 区 分 它 是 否 应 当 被 作为 任务 运行 器 的 回调 函数 。 


借助 Promise ， 你 可 以 确保 每 个 异步 操作 都 返回 一 个 Promise ， 从 而 大 幅度 简化 以 及 规范 化 
异步 处 理 ， 通 用 接口 也 意味 着 你 可 以 大 大 减少 异步 代码 。 此 处 有 一 个 简化 任务 运行 器 的 方 
A: 


let fs = require("fs"); 


function run(taskDef) { 


// 创建 迭代 器 
let task = taskDef(); 


// 启动 任务 
let result = task.next(); 


// 递归 使 用 函数 来 进行 和 迭代 
(function step() { 


// 如 果 还 有 更 多 要 做 的 
if (!result.done) { 


// 决议 一 个 Promise ， 让 任务 处 理 变 简单 
let promise = Promise.resolve(result.value); 
promise.then(function(value) { 
result = task.next(value); 
step(); 
}).catch(function(error) { 
result = task.throw(error); 
step(); 
}); 
} 
}()); 


// 定义 一 个 函数 来 配合 任务 运行 器 使 用 


function readFile(filename) { 
return new Promise(function(resolve, reject) { 
fs.readFile(filename, function(err, contents) { 


if (err) { 
reject(err); 
} else { 


resolve(contents); 


run(function*() { 
let contents = yield readFile("config.json"); 
doSomethingWith(contents) ; 
console.log("Done"); 


3); 


在 此 版 本 的 代码 中 ， 一 个 通用 的 run() 函数 执行 了 生成 器 来 创建 一 个 迭代 器 。 它 调用 了 
task.next() 来 启动 任务 ， 并 递归 调用 step() 直到 和 迭代 完成 。 


在 step() 函数 内 部 ， 如 果 还 有 更 多 工作 要 做 ， 那 么 result.done 的 值 会 是 false ， 此 时 
result.value 应 当 是 一 个 Promise ， 调 用 promise.resolve() 只 为 预防 函数 未 正确 返回 
Promise ( 记 住 : Promise. CEREN 在 被 传 入 任意 Promise 时 只 会 直接 将 其 传递 回来 ， 而 
不 是 Promise 的 参数 则 会 被 包装 为 Promise ) 。 接 下 来 ， 一 个 完成 处 理 函 数 被 添加 以 便 提 取 
该 Promise 值 ， 并 将 该 值 传 回 迭 代 器 。 此 后 ， 在 step() 函数 调用 自身 之 前 ， result KM 
值 为 下 一 个 yield 的 结果 。 


一 个 拒绝 处 理 函 数 将 任意 拒绝 结果 存储 在 一 个 错误 对 象 中 。 task.throw() 方法 将 这 个 错误 对 
象 传 回 给 迭代 器 ， 而 若 一 个 错误 在 任务 中 被 捕获 ， result 也 会 被 赋值 为 下 一 个 yield 的 结 
果 ， 这 样 step() 也 会 在 catch) 内 部 被 调用 ， 以 便 继 续 任 务 执 行 。 


run() HAA ZITEKEAN yield 来 实现 异步 代码 的 生成 器 ， 而 不 会 将 Promise (或 回调 
BR) 暴露 给 开发 者 。 事 实 上 ， 由 于 函数 调用 后 的 返回 值 总 是 会 被 转换 为 一 个 Promise ， 该 
函数 甚至 允许 返回 Promise 之 外 的 类 型 。 这 意味 着 同步 与 异步 方法 在 使 用 yield 时 都 会 正常 
工作 ， 并 且 你 永 不 需要 检查 返回 值 是 否 为 一 个 Promise ° 


唯一 需要 担心 的 是 ， 要 确保 诸如 E 的 异步 方法 能 返回 一 个 正确 标记 其 状态 的 
Promise 。 对 于 Node.js 内 置 的 方法 来 说 ， 这 意味 着 你 必须 转换 这 些 方法 ， 让 它们 返回 
Promise 而 不 是 使 用 回调 函数 。 


未 来 的 异步 任务 运行 


在 我 写 这 本 书 的 时 候 ， 为 JS et 引入 简单 语法 的 一 项 工作 正在 进行 。 此 工 
作 开 展 在 await 语法 上 ， 极 度 借鉴 了 上 述 以 Promise 为 基础 的 例子 。 其 基本 理念 是 使 
用 一 个 被 async 标记 的 函数 ae SHARMA A—+ BANE await 而 非 
yield ， 就 像 这 样 : 


(async function() { 
let contents = await readFile("config.json"); 
doSomethingwith(contents); 
console.log("Done"); 


}); 


在 function 之 前 的 async 关键 字 标 明了 此 函数 使 用 异步 方式 运行 。 await 关键 字 则 

表示 对 于 readFile("config.json") 7 hA M 2k E— Promise ， 若 返回 类 型 不 

. ， 则 会 将 其 包装 为 Promise ° 5 Hit runo 的 实现 一 致 ， await A Promise 被 
绝 的 情况 下 抛 出 错误 ， 和 否则 它 将 返回 该 Promise 被 决议 的 值 。 最 终结 果 是 你 可 以 将 异 

we ， 仅 需 管理 基于 和 迭代 器 的 状态 机 ， 不 用 付出 额外 开销 。 


await peo 4 Æ ES2017 (PP ES8 ) 中 被 最 终 敲定 。 (译注 : CMA ES2017 标 
准 而 正式 启 


cx 


总 结 

Promise 被 设计 用 于 改善 JS 中 的 异步 编程 ， 与 事件 及 回调 函数 对 比 ， 在 异步 操作 方面 为 你 提 
供 了 更 多 的 控制 权 与 组 合 性 。 Promise 调度 被 添加 到 JS 引擎 作业 队列 ， 以 便 稍 后 执行 。 不 
过 此 处 有 另 一 个 作业 队列 追踪 着 Promise 的 完成 与 拒绝 处 理 函 数 ， 以 确保 准确 执行 。 


Promise 具有 三 种 状态 : 进行 中 、 已 完成 、 已 拒绝 。 一 个 Promise 起 始 于 进行 态 ， 并 在 成 功 
时 转 为 完成 态 ， 或 在 失败 时 转 为 拒绝 态 。 在 这 两 种 情况 下 ， 处 理 函 数 都 能 被 添加 以 便 在 
Promise 被 解决 后 作出 响应 。 then() 方法 允许 你 绑 定 完成 处 理 函 数 与 拒绝 处 理 函 数 ， 而 
catch() AIA A AFAR 4B LE HR o 


你 能 用 多 种 方式 将 多 个 Promise 串联 在 一 起 ， 并 在 它们 之 间 传 递 信息 。 每 个 对 then() HH 
用 都 创建 并 返回 了 一 个 新 的 Promise ， 在 前 一 个 Promise 被 决议 时 ， 新 Promise 也 会 被 决 
议 。 Promise 链 可 被 用 于 触发 对 一 系列 异步 事件 的 响应 。 你 还 能 使 用 promise. race() 与 
Promise.all() 来 监视 多 个 Promise 的 进程 ， 并 进行 相应 的 响应 。 


组 合 使 用 生成 器 与 Promise 会 让 异步 任务 运行 得 更 容易 ， 这 是 由 于 Promise 提供 了 异步 操作 
可 返回 的 一 个 通用 接口 。 这 样 你 就 能 使 用 生成 器 与 yield 运算 符 来 等 待 异步 响应 ， 并 作出 适 
当 的 应 答 合 “。 


多 数 新 的 web API 都 基于 Promise 创建 ， 并 且 你 可 以 期 待 未 来 会 有 更 多 的 效仿 之 作 。 


第 十 二 章 代理 与 反射 接口 


ES5 与 ES6 都 推进 了 JS 功能 的 公开 。 例 如 ，JS 运行 环境 包含 一 些 不 可 枚 举 、 不 可 写 入 的 
对 象 属性 ， 然 而 在 ES5 之 前 开发 者 无 法 定义 他 们 自己 的 不 可 枚 举 属 性 或 不 可 写 入 属性 。 ESS 
引入 了 object.defineProperty() 方法 以 便 开 发 者 在 这 方面 能 够 像 JS 引擎 那样 做 。 


ES6 让 开发 者 能 进一步 接近 JS 引擎 的 能 力 ， 这 些 能 力 原先 只 存在 于 内 置 对 象 上 。 语 言 通 过 代 
Æ ( proxy) 暴露 了 在 对 象 上 的 内 部 工作 ， 代 理 是 一 种 封装 ， 能 够 拦截 并 改变 JS 引擎 的 底 
层 操作 。 本 章 会 首先 介绍 代理 所 想 要 处 理 的 问题 ， 并 且 会 讨论 如 何 更 有 效 地 创建 并 使 用 代 

理 。 


o 数组 的 问题 
e 代理 与 反射 是 什么 ? 
。 创建 一 个 简单 的 代理 
o 使 用 set 陷阱 函数 验证 属性 值 
o 使 用 get 陷阱 防 数 进行 对 象 外 形 验 证 
o 使 用 has 陷阱 函数 隐藏 属性 
e 使 用 deleteProperty 陷阱 函数 避免 属性 被 删除 
o 原型 代理 的 陷阱 函数 
o 原型 代理 的 陷阱 函数 如 何 工 作 
o 为 何 存在 两 组 方法 ? 
© 对 象 可 扩展 性 的 陷阱 函数 
o 两 个 基本 范例 
o 可 扩展 性 的 重复 方法 
o 属性 描述 符 的 陷阱 函数 
o 阻止 Object.defineProperty() 
o 描述 符 对 象 的 限制 
o 重复 的 描述 符 方法 
= defineProperty() 方法 
= getOwnPropertyDescriptor() 方法 
ownKeys 陷阱 函数 
使 用 apply 4 construct 陷阱 亟 数 的 函数 代理 
o 验证 函数 的 参数 
o 调用 构造 器 而 无 须 使 用 new 
o 重 写 抽象 基础 类 的 构造 器 
o 可 被 调用 的 类 构造 器 
可 被 撤销 的 代理 
解决 数组 的 问题 
o 检测 数组 的 索引 


o 在 添加 新 元 素 时 增加 长 度 属性 
o 在 减少 长 度 属 性 时 移 除 元 素 
o 实现 MyArray 类 
© 将 代理 对 象 作 为 原型 使 用 
o 在 原型 上 使 用 get 陷阱 函数 
o 在 原型 上 使 用 set 陷阱 函数 
o 在 原型 上 使 用 has 陷阱 函数 
将 代理 作为 类 的 原型 


o 
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数组 的 问题 


在 ES6 之前，JS 的 数组 对 象 拥有 特定 的 行为 方式 ， 开 发 者 在 自 定义 对 得 中 无 法 对 其 进行 模 
拟 。 当 你 给 数组 元 素 赋值 时 ， 数 组 的 length 属性 会 受到 影响 ， 同 时 你 也 可 以 通过 修改 
length 属性 来 变更 数组 的 元 素 。 例 如 : 

let colors = ["red", “green, “brueti, 

console.log(colors.length); ie) 


colors[3] = "black"; 


console.log(colors.length); M A 
console.log(colors[3]); // "black" 


colors.length = 2; 


console.log(colors.length); Hit D 
console.log(colors[3]); // undefined 
console.log(colors[2]); // undefined 
console.log(colors[1]); // "green" 


colors 开始 时 有 三 个 元 素 。 把 "black" 赋值 给 colors[3] 会 自动 将 length 增加 到 4 
; 而 此 后 设置 length A 2 则 会 移 除 数组 的 最 末 两 个 元 素 ， 从 而 只 保留 起 始 处 的 两 个 元 
素 。 在 ES5 中 开发 者 无 法 模拟 实现 这 种 行为 ， 但 代理 的 出 现 改 变 了 这 种 情况 。 


这 种 不 规范 行为 就 是 ESS 将 数组 认定 为 奇异 对 象 的 原因 。 
代理 与 反射 是 什么 ? 
通过 调用 new Proxy() ? 你 可 以 创建 一 个 代理 ， 用 于 替代 另 一 个 对 象 (被 称 为 目标 ) ， 这 个 


代理 对 目标 对 象 进 行 了 虚拟 ， 因 此 该 代理 与 该 目标 对 象 表 面 上 可 以 被 当 作 同一 个 对 象 来 对 
待 。 


代理 允许 你 拦截 在 目标 对 象 上 的 底层 操作 ， 而 这 原本 是 JS 引擎 的 内 部 能 力 。 拦 截 行为 使 用 了 
一 个 能 够 响应 特定 操作 的 函数 〈 被 称 为 陷阱 ) 。 


反射 接口 由 reflect 对 象 所 代表 ， 是 给 底层 操作 提供 默认 行为 的 方法 的 集合 ， 这 些 操作 是 能 
够 被 代理 重 写 的 。 每 个 代理 陷阱 都 有 一 个 对 应 的 反射 方法 ， 每 个 方法 都 与 对 应 的 陷阱 函数 同 
名 ， 并 且 接 收 的 参数 也 与 之 一 致 。 下 表 总 结 了 这 些 行为 : 


代理 陷阱 被 重 写 的 行为 默认 行 . 
get 读 取 一 个 属性 的 值 Reflect.get() 
set AN Reflect.set() 
has in 运算 符 Reflect .has() 
deleteProperty delete 运算 符 Reflect .deleteProper 
getPrototypeof Object.getPrototypeOf( ) Reflect.getPrototype 
setPrototypeof Object.setPrototypeOf ( ) Reflect.setPrototype 
isExtensible Object.isExtensible() Reflect.isExtensible 
preventExtensions Object.preventExtensions() Reflect.preventExter 
getOwnPropertyDescriptor Object .getOwnPropertyDescriptor() Reflect .getOwnProper 
defineProperty Object .defineProperty() Reflect .defineProper 


Object.keys ` 


ownKeys Object.getOwnPropertyNames() 与 Reflect . ownkeys() 
Object .getOwnPropertySymbols() 


apply 调用 一 个 函数 Reflect.apply() 
construct 使 用 new 调用 一 个 函数 Reflect.construct() 


每 个 陷阱 函数 都 可 以 重 写 JS 对 象 的 一 个 特定 内 置 行为 ， 允 许 你 拦截 并 修改 它 。 如 果 你 仍然 需 
要 使 用 原先 的 内 置 行为 ， 则 可 使 用 对 应 的 反射 接口 方法 。 一 旦 创建 了 代理 ， 你 就 能 清晰 了 解 
代理 与 反射 接口 之 间 的 关系 ， 因 此 我 们 最 好 通过 一 些 例子 来 进行 深入 研究 。 


ES6 的 原始 草案 还 有 一 个 名 为 enumerate 的 陷阱 函数 ， 其 设计 意图 是 更 改 for-in 与 
Object.keys() 在 对 象 上 进行 属性 枚 举 的 机 制 。 然 而 ， 该 陷阱 函数 在 ECMAScript 7 
(也 被 称 为 ECMAScript 2016 ) 中 被 移 除 了 ， 因 为 它 实现 。 enumerate MH & 
数 不 会 再 出 现在 任何 JS 运行 环境 中 ， 也 不 会 在 本 章 进 行 介绍 。 


创建 一 个 简单 的 代理 


当 你 使 用 proxy 构造 器 来 创建 一 个 代理 时 ， 需 要 传递 两 个 参数 : 目标 对 象 以 及 一 个 处 理 器 
(handler) ， 后 者 是 定义 了 一 个 或 多 个 陷阱 函数 的 对 象 。 如 果 未 提供 陷阱 函数 ， 代 理会 对 所 
有 操作 采取 默认 行为 。 为 了 创建 一 个 仅 进 行 转发 的 代理 ， 你 需要 使 用 不 包含 任何 陷阱 防 数 的 
处 理 器 : 


let target = {}; 


let proxy = new Proxy(target, {}); 


proxy.name = "proxy"; 
console.log(proxy.name); A Oxy 
console.log(target.name) ; TARORA 
target.name = "target"; 
console.log(proxy.name); ander 
console.log(target.name); //} Staggers 


该 例 中 的 proxy 对 象 将 所 有 操作 直接 转发 给 target 对 象 。 当 proxy.name 属性 被 赋值 为 字 
符 串 "proxy" 的 时 候 ， target.name 属性 也 同时 被 创建 ， 代 理 对 象 proxy 自身 其 实 并 没有 
存储 该 属性 2 它 只 是 简单 将 值 转发 给 target 对 象 和 同样 ? proxy.name 与 target .name 的 
属性 值 总 是 相等 ， 因 为 它们 都 指向 target.name ， 这 就 意味 着 :为 target.name 设置 一 个 新 
值 会 在 proxy.name 上 反映 出 相同 的 改变 。 当 然 ， 缺 少 陷阱 函数 的 代理 没什么 用 ， 那 么 若 为 
其 定义 一 个 陷阱 函数 ， 又 会 如 何 ? 


使 用 set 陷阱 函数 验证 属性 值 


假设 你 想 要 创建 一 个 对 象 ， 并 要 求 其 属性 值 只 能 是 
都 要 被 验证 ， 并 且 在 属性 值 不 为 数值 类 型 时 应 当 抛 
重 写 设置 属性 值 时 的 默认 行为 ， 该 陷阱 函数 能 接受 


数值 ， 这 就 意味 着 该 对 象 的 每 个 新 增 属性 
出 错误 。 为 此 你 需要 定义 set KARAR 
四 个 参数 : 


1. trapTarget : 将 接收 属性 的 对 象 〈 即 代理 的 目标 对 象 ) ; 
2. key : 需要 写 入 的 属性 的 键 (字符 串 类 型 或 符号 类 型 ) ; 
3. value : 将 被 写 入 属性 的 值 ; 

4. receiver : 操作 发 生 的 对 象 (通常 是 代理 对 象 ) © 


Reflect.set() 是 set 陷阱 函数 对 应 的 反射 方法 ， 同时 也 是 set 操作 的 默认 行为 
Reflect.set() 方法 与 set 陷阱 函数 一 样 ， 能 接受 这 四 个 参数 ， 以 便 在 陷阱 函数 内 部 使 用 9 
该 陷阱 函数 需要 在 属性 被 设置 完成 的 情况 下 返回 true ， 否 则 应 当 返 回 false ， 而 
Reflect.set() 也 会 基于 操作 是 否 成 功 而 返回 相应 的 结果 。 


你 需要 使 用 set 陷阱 函数 来 拦截 传 入 的 value 值 ， 以 便 对 属性 值 进行 验证 。 此 处 有 个 例 


let target = { 
name: "target" 


}; 


let proxy = new Proxy(target, { 
set(trapTarget, key, value, receiver) { 


// 忽略 已 有 属性 ， 避 免 影 响 它 们 
if (!trapTarget.hasOwnProperty(key)) { 
if (isNaN(value)) { 
throw new TypeError("Property must be a number."); 





} 

} 

// 添加 属性 

return Reflect.set(trapTarget, key, value, receiver); 

i 

}); 
// 添加 一 个 新 属性 
proxy.count = 1; 
console.log(proxy.count); MA “al 
console.log(target.count); Hip ih 
// 你 可 以 为 name 赋 一 个 非 数值 类 型 的 值 ， 因 为 该 属性 已 经 存在 
proxy.name = "proxy"; 
console.log(proxy.name); Li IOV 
console.log(target.name); /A Droxy 
// 抛 出 错误 
proxy.anotherName = "proxy"; 


这 段 代 码 定 义 了 一 个 代理 陷阱 ， 用 于 对 target 对 象 新 增 属性 的 值 进行 验证 。 当 执行 
proxy.count = 1 时 ， set 陷阱 函数 被 调用 ， 此 时 trapTarget 的 值 等 于 target 对 象 ， 
key 的 值 是 字符 串 "count" > value 的 值 是 1 ， 而 receiver 的 值 是 proxy (该 参数 
在 本 例 中 并 没有 被 使 用 ) 。 target 对 象 上 尚 不 存在 名 为 count 的 属性 ， 因 此 代理 将 

value 参数 传递 给 isNaN() 方法 进行 验证 ; 如 果 验 证 结果 是 nan ， 表 示 传 入 的 属性 值 不 是 
一 个 数值 ， 需 要 抛 出 错误 ; 但 由 于 这 段 代码 将 count 参数 设置 为 1 ， 验 证 通过 ， 代 理 使 用 
一 致 的 四 个 参数 去 调用 Reflect.set() 方法 ， 从 而 创建 了 一 个 新 的 属性 。 


当 proxy.name 被 赋值 为 字符 串 时 ， 操 作成 功 完 成 。 这 是 因为 target 对 象 已 经 拥有 一 个 
name 属性 ， 因 此 验证 时 通过 调用 trapTarget.hasownProperty() 会 忽略 该 属性 ， 这 就 确保 允 
许 在 该 对 象 的 已 有 属性 上 使 用 非 数 值 的 属性 值 。 


当 proxy.anotherName 被 赋值 为 FRE 时 ， 抛 出 了 一 个 错误 。 这 是 因为 该 对 象 上 并 不 存在 
anotherName 属性 ， 因 此 该 属性 的 值 必 须 被 验证 ， 而 因为 提供 的 值 不 是 一 个 数值 ， 验 证 过 程 
就 会 抛 出 错误 。 


set 代理 陷阱 允许 你 在 写 入 属性 值 的 时 候 进行 拦截 ， 而 get 代理 陷阱 则 允许 你 在 读 取 属 性 
值 的 时 候 进行 拦截 。 


使 用 get 陷阱 函数 进行 对 象 外 形 验证 


JS 语言 有 趣 但 有 时 却 令 人 困惑 的 特性 之 一 ， 就 是 读 取 对 象 不 存在 的 属性 时 并 不 会 抛 出 错误 ， 
而 会 把 undefined 当 作 该 属性 的 值 ， 例 如 : 


let target = {}; 


console.log(target.name); // undefined 


在 多 数 语 言 中 ， 试 图 读 取 target.name 属性 都 会 抛 出 错误 ， 因 为 该 属性 并 不 存在 ; 但 JS 语 
言 却 会 使 用 undefined 。 如 果 你 曾经 在 大 型 代码 库 上 进行 过 工作 ， 那 么 你 或 许 明 白 这 种 行为 
会 导致 严重 的 问题 ， 尤 其 是 当 属性 名 称 存在 书写 错误 时 。 使 用 代理 进行 对 象 外 形 验证 ， 有 助 
于 将 你 从 这 个 错误 中 拯救 出 来 。 


对 象 外 形 ( Object Shape ) 指 的 是 对 象 已 有 的 属性 与 方法 的 集合 ，JS 引擎 使 用 对 象 外 形 来 
进行 代码 优化 ， 经 常会 创建 一 些 类 来 表示 对 象 。 如 果 你 能 大 胆 假设 茶 个 对 象 总 是 拥有 与 起 始 
时 相同 的 属性 与 方法 (可 以 通过 Object .preventExtensions() 方法 、 Object.seal() 方法 或 
object.freeze() 方法 来 达到 这 种 效果 ) ， 那 么 在 访问 不 存在 的 属性 时 抛 出 错误 就 会 非常 有 
用 。 代 理 能 够 让 对 象 外 形 验 证 变 得 轻而易举 。 


由 于 该 属性 验证 只 须 在 读 取 属性 时 被 触发 ， 因 此 只 要 使 用 get 陷阱 函数 。 该 陷阱 函数 会 在 读 
取 属 性 时 被 调用 ， 即 使 该 属性 在 对 象 中 并 不 存在 ， 它 能 接受 三 个 参数 : 


1. trapTarget : 将 会 被 读 取 属 性 的 对 象 〈 即 代理 的 目标 对 象 ) 
2. key : 需要 读 取 的 属性 的 键 (字符 串 类 型 或 符号 类 型 ) 
3. receiver : 操作 发 生 的 对 象 (通常 是 代理 对 象 ) © 


这 些 参数 借鉴 了 set 陷阱 函数 的 参数 ， 只 有 一 个 明显 的 不 同 ， 也 就 是 没有 使 用 value 参 
数 ， 因 为 get 陷阱 函数 并 不 需要 为 属性 写 入 数据 。 Reflect.get() 方法 同样 接收 这 三 个 参 
数 ， 并 且 黑 认 会 返回 属性 的 值 。 


你 可 以 使 用 get 陷阱 函数 与 Reflect.get() 方法 在 目 标 属 性 不 存在 时 抛 出 错误 ， 就 像 这 
样 : 


let proxy = new Proxy({}, { 
get(trapTarget, key, receiver) { 
if (!(key in receiver)) { 
throw new TypeError("Property " + key + " doesn't exist."); 


} 
return Reflect.get(trapTarget, key, receiver); 
} 
}); 
// 添加 属性 的 功能 正常 
proxy.name = "proxy"; 
console.log(proxy.name); // “proxy" 
// 读 取 不 存在 属性 会 抛 出 错误 
console.log(proxy.nme); // 抛 出 错误 


在 本 例 中 ， get 陷阱 函数 拦截 了 属性 读 取 操 作 ， 它 使 用 in 运算 符 来 判断 receiver 对 象 
上 是 否 已 存在 对 应 属性 。 使 用 receiver 而 非 trapTarget 去 配合 in ， 这 是 因为 
receiver 本 身 就 是 拥有 一 个 has 陷阱 函数 (在 下 一 节 介 绍 ) 的 代理 对 象 ， 在 此 处 使 用 
trapTarget 会 跳 过 has 陷阱 函数 ， 并 可 能 给 你 一 个 错误 的 结果 。 如 果 要 查找 的 属性 不 存 
在 ， 那 么 就 会 抛 出 错误 ; 否则 会 执行 默认 的 行为 。 


这 段 代码 允许 添加 proxy.name 这 样 的 新 属性 以 供 写 入 ， 并 且 此 后 可 以 正常 读 取 该 属性 的 
值 。 最 后 一 行 代码 有 一 个 拼写 错误 : proxy.nme 应 当 是 proxy.name  ， 由 于 nme 属性 并 不 
存在 ， 程 序 抛 出 了 一 个 错误 。 


使 用 has 3% BAIR Be E 


in 运算 符 用 于 判断 指定 对 象 中 是 否 存在 某 个 属性 ， 如 果 对 象 的 属性 名 与 指定 的 字符 串 或 符 
号 值 相 匹配 ， 那 么 in 运算 符 应 当 返 回 true ， 无 论 该 属性 是 对 象 自身 的 属性 还 是 其 原型 的 
属性 。 例 如 : 


let target = { 
value: 42; 


} 


console.log("value" in target); // true 
console.log("toString" in target); // true 


value 与 toString 均 存 在 于 object 对 象 中 ， 因 此 in 运算 符 都 会 返回 true 。 其 中 
value 是 对 象 自 身 的 属性 ， 而 tostring 则 是 从 object 对 象 上 继承 而 来 的 原型 属性 。 代 理 
允许 你 使 用 has 陷阱 函数 来 拦截 这 个 操作 ， 从 而 在 使 用 in 运算 符 时 返回 不 同 的 结果 。 


has 陷阱 函数 会 在 使 用 in 运算 符 的 情况 下 被 调用 ， 并 且 会 被 传 入 两 个 参数 : 


1. trapTarget : 需要 读 取 属 性 的 对 象 〈 即 代理 的 目标 对 象 ) ; 
2. key : 需要 检查 的 属性 的 键 〈 字 符 串 类 型 或 符号 类 型 ) 。 


Reflect.has() 方法 接受 与 之 相同 的 参数 ， 并 向 in 运算 符 返回 默认 响应 结果 。 使 用 has 
陷阱 函数 以 及 Reflect.has() 方法 ， 人 允许 你 修改 部 分 属性 在 接受 in 检测 时 的 行为 ， 但 保留 
其 他 属性 的 默认 行为 。 例 如 ， 若 只 想 隐 藏 value 属性 ， 你 可 以 这 么 做 : 


let target = { 
name: "target", 
value: 42 


}; 


let proxy = new Proxy(target, { 
has(trapTarget, key) { 


if (key === "value") { 
return false; 
} else { 
return Reflect.has(trapTarget, key); 


} 
} 
}); 
console.log("value" in proxy); // false 
console.log("name" in proxy); // true 


console.log("toString" in proxy); // true 


这 里 的 proxy 对 象 使 用 了 has 陷阱 函数 ， 用 于 检查 key 值 是 否 为 "value" 。 如 果 是 ， 则 
返回 false ; 否则 通过 调用 Reflect.has() 方法 来 返回 默认 的 结果 。 这 样 ， 虽 然 value 属 
性 确实 存在 于 目标 对 象 中 ， 但 in 运算 符 却 会 对 该 属性 返回 false ; 而 其 他 的 属性 ( 

name 与 toString ) 则 会 正确 地 返回 true ° 


使 用 deleteProperty 陷阱 函数 避免 属性 被 删除 


delete 运算 符 能 够 从 指定 对 象 上 删 除 一 个 属性 在 删 除 成 功 时 返回 true  ， 否则 返回 
false 。 如 果 试 图 用 delete 运算 符 去 删除 一 个 不 可 配置 的 属性 ， 在 严格 模式 下 将 会 抛 出 错 
误 ; 而 非 严 格 模式 下 只 是 单纯 返回 false 。 此 处 有 个 例子 : 


let target = { 
name: "target", 
value: 42 


J; 
Object.defineProperty(target, "name", { configurable: false }); 


console.log("value" in target); // true 


let resulti = delete target.value; 


console.log(result1); // true 
console.log("value" in target); // false 
// 注 :下 一 行 代码 在 严格 模式 下 会 抛 出 错误 
let result2 = delete target.name; 
console.log(result2) ; // false 
console.log("name" in target); i/ true 


此 处 使 用 了 delete 运算 符 删 除了 value 属性 ， 因 此 在 第 三 行 代码 的 console.log 调用 
中 ， 使 用 in 操作 符 检 测 该 属性 会 得 到 false 。 name 属性 是 不 可 配置 的 ， 因 此 对 其 使 用 
delete 操作 符 只 会 返回 false 而 不 能 删除 该 属性 (如 果 代 码 运 行 在 严格 模式 下 ， 则 会 抛 出 
错误 ) 。 你 可 以 在 代理 对 象 中 使 用 deleteProperty 陷阱 函数 以 改变 这 种 行为 。 


deleteProperty 陷阱 函数 会 在 使 用 delete 运算 符 去 删 除 对 象 属性 时 被 调用 ， 并 且 会 被 传 入 
两 个 参数 : 


1. trapTarget : 需要 删除 属性 的 对 象 〈 即 代理 的 目标 对 象 ) 5 
2. key : 需要 删除 的 属性 的 键 (字符 串 类 型 或 符号 类 型 ) o 


Reflect.deleteProperty() 方法 也 接受 这 两 个 参数 ， 并 提供 了 deleteProperty 陷阱 函数 的 默 
认 实 现 。 你 可 以 结合 Reflect. deleteProperty() 方法 以 及 deleteProperty 陷阱 函数 ， 来 修 
改 delete 运算 符 的 行为 。 例 如 ， 能 确保 value 属性 不 被 删除 : 


let target = { 
name: "target", 
value: 42 


}; 


let proxy = new Proxy(target, { 
deleteProperty(trapTarget, key) { 


if (key === "value") { 
return false; 
} else { 
return Reflect.deleteProperty(trapTarget, key); 
} 
} 
}); 
// 尝试 删除 proxy.value 
console.log("value" in proxy); enue 


let resulti = delete proxy.value; 


console.log(result1); // false 
console.log("value" in proxy); // true 
// 尝试 删除 proxy.name 

console.log("name" in proxy); US 


let result2 = delete proxy.name; 
console.log(result2); // true 


console.log("name" in proxy); // false 


这 段 代码 与 has 陷阱 函数 的 例子 相似 ， 在 deleteProperty 陷阱 函数 中 检查 key 的 值 是 否 


2, 


为 "value" ° 如 果 是 ， 返回 false ;否则 通过 调用 Reflect.deleteProperty() 方法 来 进 
默认 的 操作 。 value 属性 是 不 能 被 删除 的 ， 因 为 该 操作 被 proxy MRM ;而 name 则 能 
如 期 被 删除 。 这 么 做 允许 你 在 严格 模式 下 保护 属性 避免 其 被 删除 ， 并 且 不 会 抛 出 错误 。 


原型 代理 的 陷阱 函数 


第 四 章 介 绍 了 object.setPrototypeof() 方法 ，ES6 引入 该 方法 用 于 对 ES5 的 
object.getPrototypeof() 方法 进行 补充 。 代 理 允 许 你 通过 setprototypeof 4 
getPrototypeof 陷阱 函数 来 对 这 两 个 方法 的 操作 进行 拦截 。 Object 对 象 上 的 这 两 个 方法 都 
会 调用 代理 中 对 应 名 称 的 陷阱 函数 ， 从 而 允许 你 改变 这 两 个 方法 的 行为 。 


由 于 存在 着 两 个 陷阱 函数 与 原型 代理 相关 联 ， 因 此 分 别 有 一 组 方法 对 应 着 每 个 陷阱 函数 。 
setPrototypeof 陷阱 函数 接受 三 个 参数 : 


1. traptarget : 需要 设置 原型 的 对 象 〈 即 代理 的 目标 对 象 ) 5 
2. proto : 需 用 被 用 作 原 型 的 对 象 。 


Object.setPrototypeof() 方法 与 Reflect.setPrototypeof() 方法 会 被 传 入 相同 的 参数 。 另 一 
方面 ， getPrototypeoOf 陷阱 函数 只 接受 trapTarget 参数 ， Object.getPrototypeof () 方法 
与 Reflect.getPrototypeof() 方法 也 是 如 此 。 


原型 代理 的 陷阱 函数 如 何 工 作 


这 些 陷 阱 函数 受到 一 些 限 制 。 首 先 ， getPrototypeof 陷阱 函数 的 返回 值 必 须 是 一 个 对 象 或 者 
null ， 其 他 任何 类 型 的 返回 值 都 会 引发 “运行 时 "错误 。 对 于 返回 值 的 检测 确保 了 
Object .getPrototypeof() 会 返回 预期 的 结果 。 其 次 ， setPrototypeof SRE RERA RD 
的 情况 下 返回 false ， 这 样 会 让 object.setprototypeof() 抛 出 错误 ; MH 
setPrototype0f 的 返回 值 不 是 false > M Object.setPrototypeOf() 就 会 认为 操作 已 成 
I} o 


下 面 这 个 例子 通过 返回 null 隐藏 了 代理 对 象 的 原型 ， 并 且 使 得 该 原型 不 可 被 修改 : 


let target = {}; 
let proxy = new Proxy(target, { 
getPrototypeOf(trapTarget) { 
return null; 
}, 
setPrototypeOf(trapTarget, proto) { 
return false; 


let targetProto = Object.getPrototypeOf (target); 
let proxyProto = Object.getPrototypeOf (proxy); 


console.log(targetProto === Object.prototype); M SEIS 
console.log(proxyProto === Object.prototype); // false 
console.log(proxyProto); // null 
// RA 


Object.setPrototypeOf(target, {}); 


/ bh 由 4H os 
// YOwtatK 


Object.setPrototypeOf(proxy, {}); 


这 段 代码 突出 了 target SHA proxy 对 象 的 行为 差异 。 使 用 target 对 象 作 为 参数 调用 
Object.getPrototypeof() 会 返回 一 个 对 象 值 ; 而 使 用 proxy 对 象 调用 该 方法 则 会 返回 
null ， 因 为 getPrototypeof 陷阱 函数 被 调用 了 。 类 似 的 ， 使 用 target 去 调用 
Object.setPrototypeof() 会 成 功 ; 而 由 于 setPrototypeof 陷阱 函数 的 存在 ， 使 用 proxy 
则 会 引发 错误 。 


果 你 想 在 这 两 个 陷阱 函数 中 使 用 默认 的 行为 ， 那 么 只 需 调用 Reflect 对 象 上 的 相应 方法 。 
ia > 下面 的 代码 为 getprototypeof 方法 与 setPrototypeof 方法 实现 了 默认 的 行为 : 


let target = {}; 
let proxy = new Proxy(target, { 
getPrototypeOf(trapTarget) { 
return Reflect.getPrototypeOf(trapTarget); 
}, 
setPrototypeOf(trapTarget, proto) { 
return Reflect.setPrototypeOf(trapTarget, proto); 


}); 


let targetProto = Object.getPrototypeof(target); 
let proxyProto = Object.getPrototypeOf (proxy); 


console.log(targetProto === Object.prototype); // true 
console.log(proxyProto === Object.prototype); // true 
// 成 功 


Object.setPrototypeOf(target, {}); 


// 同样 成 功 
Object.setPrototypeOf (proxy, {}); 


在 这 个 例子 中 ， 你 可 以 将 target RA proxy 对 象 互 换 使 用 ， 因 为 getPrototypeof 与 
setPrototype0f 陷阱 函数 只 是 直接 传递 参数 去 调用 默认 的 实现 。 需要 特别 注意 的 是 ， 本 例 使 
用 了 Reflect. getPrototypeof() 方法 与 Reflect.setPrototypeof() 方法 ， 而 没有 使 用 
object 对 象 上 的 同名 方法 ， 因 为 这 些 方法 存在 重要 差别 。 


为 何 存在 两 组 方法 ? 


KF Reflect.getPrototypeof() 与 Reflect.setPrototypeof() ， 令 人 困惑 的 是 它们 看 起 来 与 
Object.getPrototypeof() 与 object.setprototypeof() 非常 相似 。 然 而 虽然 两 组 方法 分 别 进 
行 着 相似 的 操作 ， 它 们 之 间 仍 然 存在 显著 差异 。 


Object.getPrototypeof() 与 object.setprototypeof() 属于 高 级 操作 ， 从 产生 之 初 便 已 提供 
给 开发 者 使 用 ; 而 Reflect .getPrototypeof() 与 Reflect.setPrototypeof() 属于 底层 操作 2 
允许 开发 者 访 问 [[GetPrototypeof]] 与 [[SetPrototypeof]] 这 两 个 原 先 仅 供 语言 内 部 使 用 
的 操作 ° Reflect.getPrototypeof () 方法 是 对 内 部 的 [[GetPrototypeof]] 操作 的 封装 (并 附 
加 了 一 些 输入 验证 ) ， 而 Reflect.setPrototypeof() 方法 与 [[SetPrototypeof]] 操作 之 间 也 
存在 类 似 的 关系 。 虽 然 object 对 象 上 的 同名 方法 也 调用 了 [[GetPrototypeof]] 与 
[[SetPrototypeof]] ， 但 它们 在 调用 这 两 个 操作 之 前 添加 了 一 些 步 又， 并 检查 返回 值 以 决定 
如 何 行动 。 


Reflect ,getPrototypeof() 方法 在 接收 到 的 参数 不 是 一 个 对 象 时 会 抛 出 错误 ， 
Object.getPrototypeof() 则 会 在 操作 之 前 先 将 参数 值 转换 为 一 个 对 象 。 分 别传 入 一 个 
数值 给 这 两 个 方法 ， 会 得 到 截然 不 同 的 结果 : 


let result1 = Object.getPrototype0f(1); 
console.log(result1 === Number.prototype); // true 


// 抛 出 错误 
Reflect.getPrototype0f(1); 


Object.getPrototypeof() 方法 能 够 为 数值 1 找到 一 个 原型 ， 因 为 它 首先 会 将 数值 1 转换 
为 一 个 Number 对 象 ， 这 样 就 可 以 使 用 Number 对 象 的 原型 。 而 Reflect. getPrototypeof() 
方法 并 不 会 转换 这 个 参数 ， 由 于 数值 1 不 是 一 个 对 象 ， 因 此 该 方法 调用 会 导致 一 个 错误 。 


Reflect ,setPrototypeof() 方法 与 Object.setPrototypeOf() 方法 也 有 差异 。 最 重要 的 是 ， 
Reflect.setPrototypeof() 方法 返回 一 个 布尔 值 用 于 表示 操作 是 否 已 成 功 ， 成 功 时 返回 true 
， 而 失败 时 返回 false ; 124 object.setPrototypeof() 方法 的 操作 失败 ， 它 会 抛 出 错误 。 


在 “原型 代理 的 陷阱 函数 如 何 工作 "那个 小 节 的 第 一 个 例子 中 ， 当 setprototypeof 代理 陷阱 返 
回 false 时 ， 它 导致 object.setPrototypeof() 方法 抛 出 了 错误 。 此 外 ， 
Object.setPrototypeOf() 方法 会 将 传 入 的 第 一 个 参数 作为 自身 的 返回 值 ， 因此 并 不 适合 用 来 
实现 setPrototypeof 代理 陷阱 的 默认 行为 。 下 面 的 代码 演示 了 这 些 区 别 : 


let targeti = {}; 
let result1 = Object.setPrototypeOf(targeti, {}); 
console.log(result1 === targeti); nue 


let target2 = {}; 

let result2 = Reflect.setPrototype0f(target2, {}); 
console.log(result2 === target2); // false 
console.log(result2); // true 


在 本 例 中 ” Object.setPrototypeOf () 方法 将 targeti oe ? 
Reflect.setPrototypeOf( ) 方法 则 返回 了 true ° 这 个 微妙 差异 非常 ad 虽然 Object 
对 象 与 reflect TERMMBEET ENA > a enn Reflect 对 象 上 的 
方法 。 


在 使 用 代理 时 ， 这 两 组 方法 都 会 调用 getprototypeof 与 setPrototypeof 陷阱 函数 。 


对 象 可 扩展 性 的 陷阱 函数 


ES5 通过 Object.preventExtensions() 与 Object.isExtensible() 方法 给 对 象 增加 了 可 扩展 
性 。 而 ES6 则 通过 preventExtensions 4 isExtensible 陷阱 函数 允许 代理 拦截 对 于 底层 对 
象 的 方法 调用 e 这 两 个 陷阱 函数 都 接受 名 为 trapTarget 的 单个 参数 4 此 参数 代表 方法 在 哪 


个 对 象 上 被 调用 。 isExtensible 陷阱 函数 必须 返回 一 个 布尔 值 用 于 表明 目标 对 象 是 否 可 被 扩 
展 ， 而 preventExtensions 陷阱 函数 也 需要 返回 一 个 布尔 值 2 用 于 表明 操作 是 天 已 成 功 。 


同时 也 存在 Reflect.preventExtensions() 与 Reflect.isExtensible() 方法 ， 用 于 实现 默认 的 
行为 。 这 两 个 方法 都 返回 布尔 值 ， 因 此 它们 可 以 在 对 应 的 陷阱 函数 内 直接 使 用 。 


两 个 基本 范例 


为 了 弄 懂 对 象 可 扩展 性 的 陷阱 函数 如 何 运 作 ， 可 研究 如 下 代码 ， 该 代码 实现 了 isExtensible 
与 preventExtensions 陷阱 函数 的 默认 行为 。 


let target = {}; 
let proxy = new Proxy(target, { 
isExtensible(trapTarget) { 
return Reflect.isExtensible(trapTarget); 
}, 
preventExtensions(trapTarget) { 
return Reflect.preventExtensions(trapTarget) ; 


} 
}); 
console.log(Object.isExtensible(target)); Lf enue 
console.log(Object.isExtensible(proxy) ); // tyue 


Object.preventExtensions(proxy); 


console.log(Object.isExtensible(target)); // false 
console.log(Object.isExtensible(proxy)); // false 


这 个 例子 将 Object.preventExtensions() 与 Object.isExtensible() 方法 直接 从 proxy aR 
传递 到 target 对 象 。 当 然 ， 你 也 可 以 自行 修改 这 种 行为 。 例 如 ， 如 果 不 想 让 代理 上 的 
Object .preventExtensions() 操作 成 功 ， 你 可 以 强制 preventExtensions 陷阱 函数 返回 


false ° 


let target = {}; 
let proxy = new Proxy(target, { 
isExtensible(trapTarget) { 
return Reflect.isExtensible(trapTarget); 
}, 
preventExtensions(trapTarget) { 
return false 


} 
}); 
console.log(Object.isExtensible(target)); /7 true 
console.log(Object.isExtensible(proxy)); // true 


Object.preventExtensions(proxy); 


console.log(Object.isExtensible(target)); //7 true 
console.log(Object.isExtensible(proxy)); // true 


这 段 代码 中 ， 对 于 Object.preventExtensions(proxy) 的 调用 被 有 效 地 忽略 了 。 因为 
preventExtensions 陷阱 函数 返回 了 false ， 因 此 该 操作 并 不 会 被 传递 到 target 对 象 上 ， 
于 是 后 面 的 object.isExtensible() 仍然 会 返回 true ° 


译注 : 此 代码 在 FireFox 和 Edge 中 能 够 正常 执行 ， 但 在 Chrome 中 却 会 在 


Object.preventExtensions(proxy) 这 一 行 抛 出 错误 。 


可 扩展 性 的 重复 方法 


你 可 能 已 经 注意 到 : 在 可 扩展 性 方面 ， Object SRA Reflect 对 象 再 次 出 现 了 重复 的 方 
法 。 不 过 它们 之 间 的 差异 相对 要 小 得 多 : object.isExtensible() 方法 与 
Reflect.isExtensible() 方法 几乎 一 样 ， 只 在 接收 到 的 参数 不 是 一 个 对 象 时 才 有 例外 。 此 时 
Object.isExtensible() 总 是 会 返回 false ， 而 Reflect.isExtensible( ) 则 会 抛 出 一 个 错 
误 。 此 处 有 个 示例 : 


let result1 = Object.isExtensible(2); 
console.log(result1); // false 


// 抛 出 错误 
let result2 = Reflect.isExtensible(2); 


这 种 区 别 与 object.getPrototypeof() 方法 和 Reflect.getPrototypeof() 方法 之 间 的 区 别 相 
似 ， 底 层 功 能 的 方法 与 对 应 的 高 层 方 法 相 比 ， 会 进行 更 严格 的 错误 检查 。 


Object .preventExtensions() 方法 与 Reflect .preventExtensions() 方法 也 是 非常 相似 的 
object.preventExtensions() 方法 总 是 将 传递 给 它 的 参数 值 作 为 自身 的 返回 值 ， 即 使 该 参数 不 
是 一 个 对 象 ; 而 另 一 方面 Reflect.preventExtensions() 方法 则 会 在 参数 不 是 对 象 时 抛 出 错 


。 当 参数 确实 是 一 个 对 象 时 ， Reflect.preventExtensions() 会 在 操作 成 功 时 返回 true ， 
否则 返回 false 。 例 如 : 


let result1 = Object.preventExtensions(2); 
console.log(result1); Hit 2 


let target = {}; 
let result2 = Reflect.preventExtensions(target); 
console.log(result2); // true 


// 抛 出 错误 
let result3 = Reflect.preventExtensions(2); 


此 代码 中 的 Object.preventextensions() 将 传递 给 它 的 参数 2 作为 返回 值 ， 尽 管 2 并 不 是 
一 个 对 象 。 而 Reflect.preventExtensions() 方法 在 接收 一 个 对 象 作为 参数 时 返回 true 
， 但 在 接收 2 时 抛 出 了 错误 。 


属性 描述 符 的 陷阱 函 


ES5 最 重要 的 特征 之 一 就 是 引入 了 object.defineProperty() 方法 用 于 定义 属性 的 特性 。 在 
JS 之 前 的 版 本 中 ， 没 有 方法 可 以 定义 一 个 访问 器 属性 ， 也 不 能 让 属性 变 成 只 读 或 是 不 可 枚 
举 。 而 这 些 特性 都 能 够 利用 object.defineproperty() 方法 来 实现 ， 并 且 你 还 可 以 利用 
Object .getownPropertyDescriptor() 方法 来 检索 这 Be Aap 性 。 


代理 允许 你 使 用 defineProperty 与 getOwnPropertyDescriptor 陷阱 函数 ， 来 分 mike 截 对 于 
Object.defineProperty() 与 Object .getOwnPropertyDescriptor() 的 调用 。 defineProperty 


陷阱 函数 接受 下 列 三 个 参数 : 


1. trapTarget : 需要 被 定义 属性 的 对 象 〈 即 代理 的 目标 对 象 ) 5 
2. key : 属性 的 键 〈 字 符 串 类 型 或 符号 类 型 ) ; 
3. descriptor :为 该 属性 准备 的 描述 符 对 象 。 


defineProperty 陷阱 函数 要 求 你 在 操作 成 功 时 返回 true ， 否 则 返回 false ° 
getOwnPropertyDescriptor 陷阱 函数 则 只 接受 trapTarget 与 key 这 两 个 参数 ， 并 会 返回 对 
应 的 描述 符 ° Reflect.defineProperty() 与 Reflect. ee 方法 作为 

上 述 陷阱 隐 数 的 对 应 方法 ， 接 受 与 之 相同 的 参数 。 此 处 有 个 例子 ， 实 现 了 每 个 陷阱 函数 的 默 
认 行 为 : 


let proxy = new Proxy({}, { 
defineProperty(trapTarget, key, descriptor) { 
return Reflect.defineProperty(trapTarget, key, descriptor); 


}, 
getOwnPropertyDescriptor(trapTarget, key) { 
return Reflect.getOwnPropertyDescriptor(trapTarget, key); 


3); 


Object.defineProperty(proxy, "name", { 
value: "proxy" 


}); 
console.log(proxy.name) ; Lf !OGOxy™ 
let descriptor = Object.getOwnPropertyDescriptor(proxy, "name"); 


console.log(descriptor.value) ; // "proxy" 


这 段 代码 使 用 了 Object .defineProperty() 方法 在 代理 对 象 上 定义 了 名 为 "name" 的 属性 ， 该 
属性 的 描述 符 可 以 使 用 Object .getOwnPropertyDescriptor() 方法 进行 检索 a 


阻止 Object.defineProperty() 


defineProperty 陷阱 函数 要 求 你 返回 一 个 布尔 值 用 于 表示 操作 是 否 已 成 功 。 当 它 返 回 true 
时 ， Object.defineProperty() 会 正常 执行 ; 而 如 果 它 返回 了 false > M 
Object.defineProperty() 会 抛 出 错误 。 你 可 以 使 用 该 功能 来 限制 哪些 属性 可 以 被 
Object.defineProperty() 方法 定义 。 例 如 ， 如 果 想 阻止 定义 符号 类 型 的 属性 ， 你 可 以 检查 传 
入 的 键 是 否 为 符号 ， 若 是 则 返回 false ， 就 像 这 样 : 


let proxy = new Proxy({}, { 
defineProperty(trapTarget, key, descriptor) { 


if (typeof key === "symbol") { 
return false; 


return Reflect.defineProperty(trapTarget, key, descriptor); 


3); 


Object.defineProperty(proxy, "name", { 
value: "proxy" 


3); 
console.log(proxy.name) ; // “proxy" 
let nameSymbol = Symbol("name"); 


// 抛 出 错误 
Object.defineProperty(proxy, nameSymbol, { 
value: "proxy" 


}); 


当 key 是 一 个 符号 时 ， defineproperty 代理 陷阱 会 返回 false ， 而 其 他 情况 下 则 会 保持 
默认 的 行为 。 当 使 用 字符 串 "name" 作为 键 去 调用 Object ,defineProperty() 时 ， 该 方法 能 够 
成 功 执 行 ; 然而 当 使 用 符号 变量 nameSymbol 去 调用 Object .defineProperty() 的 时 候 ， 
defineproperty 陷阱 函数 返回 了 false ， 导 致 程序 抛 出 了 错误 。 


你 可 以 让 陷阱 函数 返回 true ， 同 时 不 去 调用 Reflect. rom 方法 ， 这 样 


Object.defineProperty() 就 会 静默 失败 ， 如 此 便 可 在 未 实 定义 属性 的 情况 下 抑制 运 


行 错误 。 


描述 符 对 象 的 限制 


为 了 确保 Object ,defineProperty'() 与 Object.getOwnPropertyDescriptor() 方法 的 行为 一 
致 ， 传 递 给 defineProperty 陷阱 函数 的 描 述 符 对 象 必 须 是 正规 的 。 出 于 同一 原 ? 
getOwnPropertyDescriptor 陷阱 函数 数 返 回 的 对 象 也 始终 需要 被 验证 。 


任意 对 象 都 能 作为 Object.defineProperty() 方法 的 第 第 三 三 个 参数 ; 然而 传递 给 
defineProperty 陷 阱 函数 的 描述 符 对 象 参 数 > We | 只 有 enumerable ` configurable ` 
value ` writable ` get 与 set 这 些 属性 是 被 许可 的 。 例 如 


let proxy = new Proxy({}, { 
defineProperty(trapTarget, key, descriptor) { 
console.log(descriptor.value) ; PROXY 
console.log(descriptor.name) ; // undefined 


return Reflect.defineProperty(trapTarget, key, descriptor); 


3); 


Object.defineProperty(proxy, "name", { 
value: "proxy", 
name: "custom" 


3); 


此 代码 中 调用 Object .defineProperty() 时 ， 在 第 三 个 参数 上 使 用 了 一 个 非 标准 的 name & 
性 。 当 defineproperty 陷阱 函数 被 调用 时 ， descriptor 对 象 不 会 拥有 name 属性 ， 只 拥有 
一 个 value 属性 。 这 是 因为 descriptor 对 象 实际 上 并 不 是 原先 传递 给 


Object.defineProperty() 方法 的 第 三 个 参数 ， 而 是 一 个 新 的 对 象 ， 其 中 只 包含 了 被 许可 的 属 
性 (因此 name 属性 被 丢弃 了 ) © Reflect.defineProperty() 方法 同样 也 会 忽略 描述 名 FEG 


非 标准 属性 


getOwnPropertyDescriptor 陷阱 遂 数 有 一 个 微 bz 差异 要 求 返 回 值 必须 是 null ` 
undefined ， 或 者 是 一 个 对 象 。 如 果 返 回 值 是 一 个 对 象 ， 则 只 允许 该 对 象 拥有 enumerable 
`~ configurable `œ value ` writable ` get 或 set 这 些 自 有 属性 。 如果 你 返回 的 对 
象 包含 了 不 被 许可 的 自 有 属性 ， 则 程序 会 抛 出 错误 ， 就 像 下 面 演示 的 这 样 : 


let proxy = new Proxy({}, { 
getOwnPropertyDescriptor(trapTarget, key) { 
return { 
name: "proxy" 


}; 
}); 
// 抛 出 错误 


let descriptor = Object.getOwnPropertyDescriptor(proxy, "name"); 


name 属性 在 属性 描述 符 中 是 不 被 许可 的 ， 因 此 当 Object .getOwnPropertyDescriptor() 被 调 
用 时 ， getownPropertyDescriptor 的 返回 值 会 触发 一 个 错误 。 这 个 限制 保证 了 
Object.getOwnPropertyDescriptor() 的 返回 值 总 是 拥有 可 信任 的 结构 ， 无 论 是 否 使 用 了 代 
JẸ o 


重复 的 描述 符 FA k 


ES6 再 次 出 现 了 令 人 困惑 的 相似 方法 ， object.defineProperty() 和 

Object .getOwnPropertyDescriptor() 方法 貌似 分 当 别 与 Reflect .defineProperty() 和 
Reflect.getOwnPropertyDescriptor() 方法 相同 。 正如 本 章 之 前 讨论 过 的 那些 配套 方法 一 样 ， 
这 些 方法 也 存在 一 些微 小 但 重要 的 差异 。 


defineProperty() 方法 


Object.defineProperty() 方法 与 Reflect.defineProperty() 方法 几乎 一 模 一 样 ， 只 是 返回 值 
有 区 别 。 前 者 返回 调用 它 时 的 第 一 个 参数 ， 而 后 者 在 操作 成 功 时 返回 true 、 失 败 时 返回 
false 。 例 如 : 


let target = {}; 

let resulti = Object.defineProperty(target, "name", { value: "target "}); 
console.log(target === result1); // true 

let result2 = Reflect.defineProperty(target, "name", { value: "reflect" }); 


console.log(result2); 7/7 true 


使 用 target 对 象 去 调用 Object .defineProperty() 方法 ， 返 回 值 也 是 target ° 而 同样 使 
用 target 对 象 去 调用 Reflect.defineProperty() ， 返 回 值 却 是 true ， 表 示 操 作 已 经 成 
功 。 由 于 defineProperty 代理 陷 阱 需要 一 个 布尔 值 作 为 返 回 值 ， 因此 最 好 在 必要 时 使 用 
Reflect.defineProperty() 来 实现 默认 的 行为 。 


getOwnPropertyDescriptor() 方法 


Object .getOwnPropertyDescriptor() 方法 会 在 接收 的 第 一 个 参数 是 一 个 基本 类 型 值 时 ， 将 该 
参数 转换 为 一 个 对 象 。 另 一 方面 ， Reflect. getOwnPropertyDescriptor() 方法 则 会 在 第 一 个 参 
数 是 基本 类 型 值 的 时 候 抛 出 错误 。 下 面 这 个 例子 展示 了 二 者 的 特性 


let descriptor1 = Object.getOwnPropertyDescriptor(2, "name"); 
console.log(descriptor1) ; // undefined 
// 抛 出 错误 


let descriptor2 = Reflect.getOwnPropertyDescriptor(2, "name"); 


此 代码 中 的 Object.getOwnPropertyDescriptor() 方法 返回 了 undefined > AW EH 2 转换 
为 一 个 对 象 ， 转 换 后 的 对 象 并 不 包含 name 属性 ， 而 返回 undefined 是 指定 属性 名 在 目标 对 
象 中 不 存在 时 的 标准 行为 。 然 而 当 Reflect .getownPropertyDescriptor() 被 调用 时 ， 立 刻 抛 出 
了 一 个 错误 ， 因 为 该 方法 不 接受 基本 类 型 值 作为 它 的 第 一 个 参数 。 


ownKeys K 24 2 


OwnKeys 代理 陷阱 拦截 了 内 部 方法 [[OwnPropertyKeys]] ? 并 允许 你 返回 一 个 数组 用 于 重 写 
该 行为 。 返 回 的 这 个 数组 会 被 用 于 四 个 方法 : object.keys() 方法 、 

Object .getOwnPropertyNames() 方法 、 Object .getOwnPropertySymbols() 方法 与 
Object.assign() 方法 ， 其 中 Object.assign() 方法 会 使 用 该 数组 来 决定 哪些 属性 会 被 复 
制 。 


ownkeys 陷阱 函数 的 默认 行为 由 Reflect.ownkeys() 方法 实现 ， 会 返回 一 个 由 全 部 自 有 属性 
的 键 构 成 的 数组 ， 无 论 键 的 类 型 是 字符 串 还 是 符号 。 Object.getownProperyNames() 方法 与 
Object.keys() 方法 会 将 符号 值 从 该 数组 中 过 滤 出 去 ; 相反 ， 

Object .getOwnPropertySymbols() 会 将 字符 串 值 过 滤 掉 ; 而 Object.assign() 方法 会 使 用 数组 
中 所 有 的 字符 串 值 与 符号 值 。 


ownkeys 陷阱 函数 接受 单个 参数 ， 即 目标 对 象 ， 同时 必须 返回 一 个 数组 或 者 一 个 类 数组 对 
象 ， 不 合 要 求 的 返回 值 会 导致 错误 。 你 可 以 使 用 ownkeys 陷阱 函数 去 过 滤 特 定 的 属性 ， 以 避 
免 这 些 属性 被 Object.keys() 方法 、 Object .getOwnPropertyNames( ) 方法 、 
object.getownpropertySymbols() 方法 或 Object.assign() 方法 使 用 。 假 设 你 不 想 在 结果 中 包 
含 任何 以 下 划 线 打头 的 属性 《在 JS 的 编码 | oe ， 0 > 那么 可 以 使 用 
ownkeys 陷阱 函数 来 将 它们 过 滤 掉 ， 就 像 下 面 这 


let proxy = new Proxy({}, { 
ownKeys(trapTarget) { 
return Reflect.ownKeys(trapTarget).filter(key => { 
return typeof key !== "string" || key[0] !== "_"; 
}); 


let nameSymbol = Symbol("name"); 


proxy.name = "proxy"; 
proxy._name = "private"; 
proxy[nameSymbol] = "symbol"; 


let names = Object.getOwnPropertyNames(proxy), 
keys = Object.keys(proxy); 
symbols = Object.getOwnPropertySymbols(proxy); 


console.log(names.length); iif a 
console.log(names[0]); // "name" 
console.log(keys.length) ; af al 
console.log(keys[0]); // "name" 


console.log(symbols.length) ; iif ah 
console.log(symbols[0]); // “Symbol(name)" 


这 个 例子 使 用 了 一 个 ownkeys 陷阱 函数 ， 首 先 调用 了 Reflect.ownkeys() 方法 来 获取 目标 对 
象 的 键 列表 ; 接 下 来 ， filter) 方法 被 用 于 将 所 有 下 划 线 打头 的 字符 串 类 型 的 键 过 滤 出 

去 ;这 之 后 向 proxy 对 象 添 加 了 三 个 属性 : name ` _name 与 nameSymbol 。 当 proxy 

对 REN Object .getOwnPropertyNames() 方法 与 Object.keys() 方法 被 调用 时 ， 只 获得 了 
name 属性 ; 类 似 的 ， Object .getownPropertySymbols'( ) 方法 被 调用 时 只 获得 了 nameSymbol 
属性 ;而 name 属性 则 始终 没有 出 现在 结果 里 ， 因 为 它 被 过 滤 了 。 


ownkeys 陷阱 函数 也 能 影响 for-in 循环 ， 因 为 这 种 循环 调用 了 陷阱 济 数 来 决定 哪些 值 
能 够 被 用 在 循环 内 。 


使 用 apply 4 construct 陷阱 函数 的 函数 代理 


在 所 有 的 代理 陷阱 中 ， 只 有 apply 与 construct 要 求 代 理 目 标 对 人 象 必 须 是 一 个 函数 。 回 忆 
一 下 第 三 章 的 内 容 ， 函 数 拥有 两 个 内 部 方法 : [[call]] 与 [[construct]] ， 前 者 会 在 函数 
被 直接 调用 时 执行 ， 而 后 者 会 在 函数 被 使 用 new 运算 符 调用 时 执行 。 apply 与 construct 
陷阱 函数 对 应 着 这 两 个 内 部 方法 ， 并 允许 你 对 其 进行 重 写 。 当 不 使 用 new 去 调用 一 个 函数 
时 ， apply 陷阱 函数 会 接收 到 下 列 三 个 参数 ( Reflect.apply() 也 会 接收 这 些 参 数 ) 


1. trapTarget : 被 执行 的 函数 ( 即 代 理 的 目标 对 象 ) ; 
2. thisArg : 调用 过 程 中 函数 内 部 的 this 值 ; 
3. argumentsList : 被 传递 给 函数 的 参数 数组 。 


当 使 用 new 去 执行 函数 时 ” construct 陷阱 函数 会 被 调用 并 接收 到 下 列 两 个 参数 : 


1. trapTarget : 被 执行 的 函数 ( 即 代 理 的 目标 对 象 ) ; 
2. argumentsList : 被 传递 给 函数 的 参数 数组 。 


Reflect.construct() 方法 同样 会 接收 到 这 两 个 参数 ， 还 会 收 到 可 选 的 第 三 参数 newTarget 
， 如 果 提 供 了 此 参数 ， 则 它 就 指定 了 函数 内 部 的 new.target 值 。 


apply 与 construct 陷阱 函数 结合 起 来 就 完全 控制 了 任意 的 代理 目标 对 象 函 数 的 行为 。 为 了 
模拟 函数 的 默认 行为 ， 你 可 以 这 么 做 : 


let target = function() { return 42 }, 


proxy = new Proxy(target, { 


apply: function(trapTarget, thisArg, argumentList) { 


return Reflect.apply(trapTarget, thisArg, argumentList); 


}, 


construct: function(trapTarget, argumentList) { 


return Reflect.construct(trapTarget, argumentList); 


} 

}); 
// 使 用 了 遂 数 的 代理 ， 其 目标 对 象 会 被 视 为 函数 
console.log(typeof proxy); 1/7 STUNG ELON 
console.log(proxy()); // 42 
var instance = new proxy(); 
console.log(instance instanceof proxy); /ue 
console.log(instance instanceof target); // true 


本 例 中 的 函数 会 返回 一 个 数值 42 。 该 函数 的 代理 使 用 了 apply 与 construct 陷阱 函 BR 
将 对 应 行为 分 别 委托 给 Reflect.apply() 与 Reflect.construct() FA: RAA RERA H 


数 就 像 目标 函数 一 样 工作 ， 


包括 使 用 typeof 会 将 其 检测 为 函数 ， 并 且 使 用 new 运算 符 调 


用 会 产生 一 个 实例 对 象 instance 。 instance 对 象 会 被 同时 判定 为 proxy 与 target 对 象 
的 实例 ， 是 因为 instanceof 运算 符 使 用 了 原型 链 来 进行 推断 ， 而 原型 链 查 找 并 没有 受到 这 
个 代理 的 影响 ， 因 此 proxy SKA target 对 象 对 于 JS 引擎 来 说 就 有 同一 个 原型 。 


LE 3 He HY HK 


apply 4 construct 陷阱 函数 在 函数 的 执行 方式 上 开启 了 很 多 的 可 


保证 所 有 参数 都 是 某 个 特定 类 型 的 ， 可 使 用 apply 陷阱 函数 来 进行 验证 : 


性 。 例 如 ， 假 设 你 想 


mp 
ow 


// 将 所 有 参数 相 加 
function sum(...values) { 


return values.reduce((previous, current) => previous + current, 0); 


let sumProxy = new Proxy(sum, { 
apply: function(trapTarget, thisArg, argumentList) { 


argumentList.forEach((arg) => { 
if (typeof arg !== "number") { 
throw new TypeError("All arguments must be numbers."); 


3); 


return Reflect.apply(trapTarget, thisArg, argumentList); 
} 
construct: function(trapTarget, argumentList) { 
throw new TypeError("This function can't be called with new."); 


} 
}); 
console.log(sumProxy(1, 2, 3, 4)); // 10 
// 抛 出 错误 


console.log(sumProxy(1, "2", 3, 4)); 


// 同样 抛 出 错误 


let result = new sumProxy(); 


此 例 使 用 了 apply 陷阱 函数 来 确保 所 有 的 参数 都 是 数值 。 sum() 函数 会 将 所 有 传递 进来 的 
参数 值 相 加 ， 如 果 传 入 参数 的 值 不 是 数值 类 型 ， 该 泡 数 仍然 会 尝试 加 法 操作 ， 这 样 可 能 会 导 
致意 外 的 结果 。 此 代码 通过 将 sum() 函数 封装 在 sumproxy() 代理 中 ， 在 函数 运行 之 前 拦截 
了 遂 数 调用 ， 以 保证 每 个 参数 都 是 数值 。 出 于 安全 的 考虑 ， 这 段 代码 使 用 construct MM 
出 错误 ， 以 确保 该 函数 不 会 被 使 用 new 运算 符 调用 。 


相反 的 ， 你 也 可 以 限制 函数 必须 使 用 new 运算 符 调用 ， 同 时 确保 它 的 参数 都 是 数值 : 


function Numbers(...values) { 
this.values = values; 


let NumbersProxy = new Proxy(Numbers, { 


apply: function(trapTarget, thisArg, argumentList) { 
throw new TypeError("This function must be called with new."); 


}, 


construct: function(trapTarget, argumentList) { 
argumentList.forEach((arg) => { 
if (typeof arg !== "number") { 
throw new TypeError("All arguments must be numbers."); 


3); 


return Reflect.construct(trapTarget, argumentList) ; 


} 
}); 
let instance = new NumbersProxy(i, 2, 3, 4); 
console.log(instance.values); Mie ll 
// 抛 出 错误 


NumbersProxy(1, 2, 3, 4); 


此 代码 中 的 apply 陷阱 函数 会 抛 出 错误 ， 而 construct BM BAM A T 
Reflect.construct() 方法 来 验证 输入 并 返回 一 个 新 的 实例 。 当 然 ， 你 也 可 以 不 必 使 用 代理 ， 
而 是 用 new.target 来 完成 相同 的 功能 。 


调用 构造 器 而 无 须 使 用 new 


第 三 章 曾 介绍 了 new.target 元 属性 ， 在 使 用 new 运算 符 调 用 函数 时 ， 这 个 属性 就 是 对 该 函 
的 一 个 引用 。 这 意味 着 你 可 以 使 用 new.target 来 判断 函数 被 调用 时 是 否 使 用 了 new ， 就 


function Numbers(...values) { 


if (typeof new.target === "undefined") { 
throw new TypeError("This function must be called with new."); 
} 
this.values = values; 
} 
let instance = new Numbers(1, 2, 3, 4); 
console.log(instance.values) ; Hi ER Apel eh] 
// 抛 出 错误 


Numbers(1, 2, 3, 4); 


这 个 例子 在 不 使 用 new 来 调用 numbers 函数 的 情况 下 抛 出 了 错误 ， 与 “验证 函数 的 参数 " 那 

个 小 节 的 例子 效果 一 致 ， 但 并 没有 使 用 代理 。 相 对 于 使 用 代理 ， 这 种 写法 更 简单 ， 并 且 若 只 

想 阻止 不 使 用 new 来 调用 函数 的 行为 ， 这 种 写法 也 更 胜 一 筹 。 然 而 有 时 你 所 要 修改 其 行为 的 
函数 是 你 所 无 法 控制 的 ， 此 时 使 用 代理 就 有 意义 了 。 


假设 Numbers 函数 是 硬 编码 的 ， 无 法 被 修改 ， 已 知 该 代码 依赖 于 new.target ， 而 你 想 要 在 
调用 函数 时 避免 这 个 a o 在 “必须 使 用 new "这 一 限制 已 经 确定 的 情况 下 ， 你 可 以 使 用 
apply 陷阱 函数 来 规避 


function Numbers(...values) { 
if (typeof new.target === "undefined") { 
throw new TypeError("This function must be called with new."); 


this.values = values; 


let NumbersProxy = new Proxy(Numbers, { 
apply: function(trapTarget, thisArg, argumentsList) { 
return Reflect.construct(trapTarget, argumentsList); 


3); 


let instance = NumbersProxy(i, 2, 3, 4); 
console.log(instance.values) ; Tee hp 2p sig 


Number sProxy 函数 允许 你 调用 Numbers 而 无 须 使 用 new ， 并 且 让 这 种 调用 的 效果 与 使 用 
了 new 的 情况 保持 一 致 。 为 此 ， apply 陷阱 函数 使 用 传 给 自身 的 参数 去 对 
Reflect.construct() 方法 进行 了 调用 ， 于 是 ”Numbers 内 部 的 new. target 就 被 设置 为 


Numbers ， 从 而 避免 抛 出 错误 。 尽 管 这 只 是 人 
做 得 更 加 直接 。 


FP new.target 的 一 个 简单 例子 ， 但 你 还 可 以 


重 写 抽象 基础 类 的 构造 器 


你 可 以 进一步 指定 Reflect.construct() 的 第 三 个 参数 ， 用 于 给 new.target 赋值 。 当 函数 把 
new.target 与 已 知 值 进 行 比较 的 时 候 ， 例如 在 创建 一 个 抽象 基础 类 的 构造 器 的 场合 下 (参阅 
第 九 章 ) ? 这 么 做 会 很 有 帮助 © 在 抽象 基础 类 的 构造 器 中 ” new.target 被 要 求 不 能 是 构造 
器 自身 ， 正 如 这 个 例子 : 


class AbstractNumbers { 
constructor(...values) { 


if (new.target === AbstractNumbers) { 
throw new TypeError("This function must be inherited from."); 


this.values = values; 


class Numbers extends AbstractNumbers {} 


let instance = new Numbers(i, 2, 3, 4); 
console.log(instance.values) ; Wh Nlak 23, A] 


// 抛 出 错误 
new AbstractNumbers(i, 2, 3, 4); 


4 new AbstractNumbers() 被 调用 时 ， new. target 等 于 AbstractNumbers ， 从 而 抛 出 了 错 
误 ; 而 调用 new Numbers() 能 正常 工作 ， 因 为 此 时 new.target 等 于 Numbers 。 你 可 以 使 用 
代理 手动 指定 new.target 从 而 绕 过 这 个 限制 : 


class AbstractNumbers { 


constructor(...values) { 
if (new.target === AbstractNumbers) { 
throw new TypeError("This function must be inherited from."); 


this.values = values; 


let AbstractNumbersProxy = new Proxy(AbstractNumbers, { 
construct: function(trapTarget, argumentList) { 
return Reflect.construct(trapTarget, argumentList, function() {}); 


3); 


let instance = new AbstractNumbersProxy(i, 2, 3, 4); 
console.log(instance.values) ; HH \(h 2p sinc) 


AbstractNumbersProxy 使 用 construct 陷阱 函数 拦截 了 对 于 new AbstractNumbersProxy() 方 
法 的 调用 ， 这 样 陷阱 函数 就 将 一 个 空 函 数 作 为 第 三 个 参数 传递 给 了 Reflect.construct() 方 
法 ， 让 这 个 空 函 数 成 为 构造 器 内 部 的 new.target 。 由 于 此 时 new.target 的 值 并 不 等 于 
AbstractNumbers ， 就 不 会 抛 出 错误 ， 构 造 器 可 以 执行 完成 。 


可 被 调用 的 类 构造 器 


第 九 章 说 明了 构造 器 必须 始终 使 用 new 来 调用 ， 原 因 是 类 构造 器 的 内 部 方法 [[call]] 被 明 
确 要 求 抛 出 错误 。 然 而 代理 可 以 拦截 对 于 [ica] 方法 的 调用 ， 意 味 着 你 可 以 借助 代理 有 
效 创 建 一 个 可 被 调用 的 类 构造 器 。 例 如 ， 如 果 想 让 类 构造 器 在 缺少 new 的 情况 下 能 够 工作 ， 
你 可 以 使 用 apply 陷阱 函数 来 创建 一 个 新 实例 。 此 处 有 个 例子 : 


class Person { 
constructor(name) { 
this.name = name; 
} 
} 


let PersonProxy = new Proxy(Person, { 
apply: function(trapTarget, thisArg, argumentList) { 
return new trapTarget(...argumentList); 
} 
}); 


let me = Personproxy("Nicholas"); 
console.log(me.name); // "Nicholas" 
console.log(me instanceof Person); // true 
console.log(me instanceof PersonProxy); // true 


PersonProxy 对 象 是 Person 类 构造 器 的 一 个 代理 。 类 构造 器 实际 上 也 是 函数 ， 因 此 在 使 用 
代理 时 它 的 行为 就 像 函 数 一 样 。 apply 陷阱 函数 重 写 了 默认 的 行为 ， 返 回 trapTarget 【这 
里 等 于 person ) 的 一 个 实例 ， 此 代码 使 用 trapTarget 以 保证 通用 性 ， 避 免 了 手动 指定 特 
定 的 类 。 此 处 还 使 用 了 扩展 运算 符 ， 将 argumentList 展开 并 传递 给 trapTarget 方法 。 在 没 
有 使 用 new 的 情况 下 调用 PersonProxy() ? 获得 了 person 的 一 个 新 实例 ; 而 若 你 试图 不 
使 用 new 去 调用 Persono ， 构 造 器 仍然 会 抛 出 错误 。 创 建 一 个 可 被 调用 的 类 构造 器 ， 只 有 
使 用 代理 才能 做 到 。 


可 被 撤销 的 代理 


在 被 创建 之 后 ， 代 理 通常 就 不 能 再 从 目标 对 象 上 被 解 纯 。 本 章 之 前 的 例子 都 使 用 了 不 可 被 撤 
销 的 代理 ， 但 有 的 情况 下 你 可 能 想 撤销 一 个 代理 以 便 让 它 不 能 再 被 使 用 。 当 你 想 通 过 公共 接 
口 向 外 提供 一 个 安全 的 对 象 ， 并 且 要 求 要 随时 都 能 切断 对 某 些 功能 的 访问 ， 这 种 情况 下 可 被 
撤销 的 代理 就 会 非常 有 用 。 


你 可 以 使 用 proxy.revocable() 方法 来 创建 一 个 可 被 撤销 的 代理 ， 该 方法 接受 的 参数 与 
Proxy 构造 器 的 相同 : 一 个 目标 对 和 象 、 一 个 代理 处 理 器 ， 而 返回 值 是 包含 下 列 属性 的 一 个 对 
象 : 


1. proxy : 可 被 撤销 的 代理 对 象 ; 
2. revoke : Fi] Takei XFL AY HA © 


当 revoke() 函数 被 调用 后 ， 就 不 能 再 对 该 proxy 对 象 进 行 更 多 操作 ， 任 何 与 该 代理 对 象 交 
互 的 意图 都 会 触发 代理 的 陷阱 函数 ， 从 而 抛 出 一 个 错误 。 例 如 


let target = { 
name: "target" 


}; 

let { proxy, revoke } = Proxy.revocable(target, {}); 
console.log(proxy.name); tale 
revoke(); 

// 抛 出 错误 


console.log(proxy.name) ; 


这 个 例子 创建 了 一 个 可 被 撤销 的 代理 ， 它 对 proxy.revocable() 方法 返回 的 对 象 进 行 了 解构 
赋值 ， 把 同名 属性 的 值 赋 给 了 proxy 与 revoke 变量 。 此 时 proxy 对 P 
撤销 的 代理 那样 被 使 用 ， 于 是 proxy . name 属性 的 值 就 是 "target" ? 因为 它 直接 传递 了 
target .name 的 值 。 然 而 一 旦 revoke() 函数 被 调用 ， proxy 就 不 再 是 可 用 的 代理 对 象 iZ 
后 试图 访问 proxy.name 会 抛 出 错误 ， 同 时 其 他 对 于 proxy 对 象 的 操作 也 都 会 触发 陷阱 函 
数 。 


解决 数组 的 问题 


在 本 章 开 始 时 ， 我 解释 了 为 何在 ES6 之 前 开发 者 无 法 准确 模拟 JS 数组 的 行为 。 而 代理 与 反 
射 接口 则 允许 你 创建 这 样 一 种 对 象 : 在 属性 被 添加 或 删除 时 ， 它 的 行为 与 内 置 数 组 类 型 的 行 
为 相同 。 为 了 唤醒 你 的 记忆 ， 此 处 有 个 例子 展示 了 代理 所 要 模拟 的 行为 : 


let colors = ["red", "green", "“blue"]; 
console.log(colors.length); LU & 
colors[3] = "black"; 


console.log(colors.length) ; ep A 
console.log(colors[3]); // "black" 


colors.length = 2; 


console.log(colors.length) ; Hip 2 
console.log(colors[3]); // undefined 
console.log(colors[2]); // undefined 
console.log(colors[1]); // “green! 


这 个 例子 可 以 体现 出 两 个 特别 重要 的 行为 特性 


1. 4 colors[3] 被 赋值 时 ， length 属性 被 自动 增加 到 4 ; 
2. 当 length 属性 被 设置 为 2 时 ， 数 组 的 最 后 两 个 元 素 被 自动 移 除 了 。 


当 想 要 重 现 内 置 数组 的 工作 方式 时 ， 仅 需 模拟 这 两 个 行为 即 可 。 接 下 来 的 几 小 节 将 会 介绍 如 
何 正 确 地 将 一 个 对 象 模拟 为 数组 。 


令 测 数组 的 索引 


必须 始终 牢记 : 对 于 数组 来 说 ， 为 整数 属性 赋值 是 一 种 特殊 情况 ， 不 同 于 对 非 整 数 的 键 的 处 
理 。 在 如 何 判断 一 个 属性 键 是 否 为 数组 的 索引 方面 ，ES6 规范 给 出 了 指南 : 


对 于 名 为 P 的 一 个 字符 串 属 性 名 称 来 说 ， 当 且 仅 当 ToString(ToUint32(P) ) 等 于 P > 
并 且 Touint32(p) 不 等 于 232 - 1 时， 它 才 能 被 用 作 数 组 的 索引 。 


这 个 操作 可 以 用 下 述 的 JS 代码 来 实现 : 


function toUint32(value) { 
return Math. floor(Math.abs(Number(value))) % Math.pow(2, 32); 


} 


function isArrayIndex(key) { 
let numericKey = toUint32(key); 
return String(numericKey) == key && numericKey < (Math.pow(2, 32) - 1); 


toUint32() HAE AMI PMMA RK > ARA AA 32 位 整数 。 
isArrayIndex() 函数 首先 将 键 值 转换 为 一 个 uint32 数 ， 并 执行 了 比较 操作 来 判断 该 键 是 否 能 
够 作为 数组 的 索引 。 借 助 这 两 个 工具 有 函数 ， 你 就 可 以 开始 实现 一 个 对 象 来 模拟 内 置 数组 。 


在 添加 新 元 素 时 增加 长 度 属性 


你 可 能 已 经 注意 到 : 数组 上 述 两 个 特殊 行为 都 依赖 于 对 属性 的 赋值 ， 这 就 意味 着 你 只 需要 使 
用 set 代理 陷阱 来 达成 这 两 个 行为 。 首 先 ， 下 面 的 例子 实现 了 第 一 个 行为 ， 即 : 当 一 个 大 于 
length - 1 的 数组 索引 被 使 用 时 ， length 属性 需要 被 增加 。 


function toUint32(value) { 
return Math. floor(Math.abs(Number(value))) % Math.pow(2, 32); 


function isArrayIndex(key) { 
let numerickKey = toUint32(key); 
return String(numerickKey) == key && numericKey < (Math.pow(2, 32) - 1); 


function createMyArray(length=0) { 
return new Proxy({ length }, { 
set(trapTarget, key, value) { 


let currentLength = Reflect.get(trapTarget, "length"); 
// 特殊 情况 
if (isArrayIndex(key)) { 


let numerickKey = Number(key); 


if (numerickey >= currentLength) { 
Reflect.set(trapTarget, "length", numericKey + 1); 


// 无 论 键 的 类 型 是 什么 ， 都 要 执行 这 行 代码 


return Reflect.set(trapTarget, key, value); 


} 
}); 
} 
let colors = createMyArray(3); 
console.log(colors.length) ; HS 
colors[0] = "red"; 
colors[1] = "green"; 


colors[2] = "blue"; 
console.log(colors.length) ; 1/3 
colors[3] = "black"; 


console.log(colors.length); // 4 
console.log(colors[3]); ia 


这 个 例子 使 用 了 set 代理 陷阱 对 数组 索引 的 设置 操作 进行 拦截 。 若 该 键 能 够 作为 数组 索引 ， 
由 于 传 入 的 键 值 始终 都 是 字符 串 ， 那 么 就 需要 将 其 转换 为 一 个 数值 ; 接 下 来 ， 如 果 该 数值 大 

于 或 等 于 当前 的 length 属性 值 ， 那 么 要 把 length 属性 值 增加 到 比 该 数值 多 1 (如 在 索引 

位 置 3 设置 一 个 项 ， 则 length 属性 必须 是 4 ) ; 最 后 通过 Reflect.set() 来 调用 属性 的 默 
认 设 置 操 作 ， 以 便 让 对 应 属性 接收 到 指定 的 值 。 


使 用 值 为 3 的 length 参数 调用 createMyArray() 函数 ， 初 始 化 了 一 个 定制 数组 ， 接 下 来 立 
刻 将 三 个 项 添加 到 该 数组 内 。 数 组 的 length 属性 一 直 保 持 为 3 > BF "black" 值 被 赋值 到 
索引 3 的 位 置 ， 此 时 length 属性 就 变 成 了 4 。 


这 样 就 成 功 模 拟 了 第 一 个 行为 ， 该 继续 处 理 第 二 个 行为 了 。 


在 减少 长 度 属性 时 移 除 元 素 


仅 当 数组 索引 值 大 于 或 等 于 length 属性 值 时 ， 所 需 模拟 的 第 一 个 数组 行为 才 会 被 使 用 。 而 
相反 的 ， 在 将 length 属性 值 设 置 得 比 之 前 更 小 的 时 候 ， 才 需要 使 用 第 二 个 行为 并 移 除数 组 
的 元 素 。 此 时 不 仅 需要 修改 length 属性 的 值 ， 还 需要 移 除 所 有 不 应 再 保留 的 元 素 。 例 如 ， 
若 数组 的 length 属性 从 4 被 设置 为 2， 则 位 置 2 与 位 置 3 的 项 就 需要 被 移 除 。 你 可 以 像 处 
理 第 一 个 行为 那样 ， 在 set 代理 陷阱 中 完成 这 个 操作 。 下 面 再 次 使 用 了 前 一 段 代码 ， 并 增加 
了 createmyArray 方法 : 


function toUint32(value) { 
return Math. floor(Math.abs(Number(value))) % Math.pow(2, 32); 


function isArrayIndex(key) { 
let numericKey = toUint32(key); 
return String(numerickey) == key && numericKey < (Math.pow(2, 32) - 1); 


function createMyArray(length=0) { 
return new Proxy({ length }, { 
set(trapTarget, key, value) { 


let currentLength = Reflect.get(trapTarget, "length"); 


// 特殊 情况 
if (isArrayIndex(key)) { 
let numerickKey = Number(key); 


if (numerickey >= currentLength) { 
Reflect.set(trapTarget, "length", numericKey + 1); 


} 
} else if (key === "length") { 


if (value < currentLength) { 


for (let index = currentLength - 1; index >= value; index--) { 
Reflect.deleteProperty(trapTarget, index); 


} 


// 无 论 键 的 类 型 是 什么 ， 都 要 执行 这 行 代码 


return Reflect.set(trapTarget, key, value); 


3); 
} 
let colors = createMyArray(3); 
console.log(colors.length); LU 
colors[0] = "red"; 
colors[i] = "green"; 


colors[2] = "blue"; 
colors[3] = "black"; 


console.log(colors.length) ; // 4 


colors.length = 2; 


console.log(colors.length) ; Hit P 
console.log(colors[3]); // undefined 
console.log(colors[2]); // undefined 
console.log(colors[1]); // “green" 
console.log(colors[0]); Lif ec 


此 代码 中 的 set 陷阱 函数 会 检查 键 的 值 是 否 为 length" ， 以 便 正确 地 调整 对 象 的 剩余 项 。 
如 果 是 ， 则 使 用 Reflect.get() 方法 来 获取 当前 的 长 度 值 ， 并 与 新 值 作 比较 。 如 果 新 值 小 于 
当前 值 ， 将 会 使 用 一 个 for 循环 来 删除 对 象 上 所 有 不 应 再 被 保留 的 属性 ， 该 循环 从 当前 数组 
KÆ ( currentLength ) 的 位 置 向 前 删除 每 个 属性 ， 直 到 触及 新 的 数组 长 度 ( value ) 为 
jE œ 


该 例子 先 向 colors 对 象 中 添加 了 四 个 颜色 ， 再 将 其 属性 设置 为 2， 结果 移 除 了 位 
置 2 与 位 置 3 的 项 ， 这 样 在 试图 访问 这 两 个 项 的 时 候 就 会 得 到 undefined 。 而 位 置 0 与 位 置 
1 的 项 仍然 可 被 访问 。 


两 个 行为 都 实现 之 后 ， 你 就 可 以 轻易 创建 一 个 对 象 来 模拟 内 置 数组 的 行为 。 然 而 使 用 函数 来 
做 这 些 事 并 不 可 取 ， 最 好 将 其 封装 为 一 个 类 ， 因 此 下 一 步 就 是 使 用 类 来 实现 这 些 功能 。 


实现 MyArray 类 


创建 一 个 使 用 代理 的 类 的 最 简单 方式 ， 就 是 照常 定义 一 个 类 但 从 构造 器 中 返回 一 个 代理 。 这 

种 方式 下 ， 该 类 被 实例 化 时 返回 的 对 象 就 是 代理 ， 而 不 是 该 类 的 实例 (实例 即 构造 器 内 部 的 
this 值 ) 。 代 理会 像 实 例 一 样 被 返回 ， 而 实例 此 时 就 变 成 了 该 代理 的 目标 对 象 。 实 例 将 会 
是 完全 私有 的 ， 无 法 被 直接 访问 ， 不 过 你 可 以 使 用 代理 去 间接 访问 它 


这 里 有 一 个 从 类 构造 器 返回 代理 的 简单 范例 : 


class Thing { 
constructor() { 
return new Proxy(this, {}); 


let myThing = new Thing(); 
console.log(myThing instanceof Thing); H ere 


在 这 个 例子 中 ， thing 类 从 它 的 构造 器 中 返回 了 一 个 代理 ， 该 代理 的 目标 对 象 是 构造 器 被 调 
用 时 其 内 部 的 this 。 这 意味 着 虽然 myThing 对 象 是 调用 Thing 构造 器 创建 的 ， 但 它 实 际 
上 是 一 个 代理 对 象 。 由 于 此 代理 将 行为 直接 传递 给 它 的 目标 对 象 ， 因 而 myThing 仍然 可 以 被 
认定 为 Thing 类 的 一 个 实例 ， 并 且 让 代理 在 使 用 thing 类 时 完全 透明 。 


知道 了 这 些 ， 使 用 代理 来 创建 一 个 定制 的 数组 类 就 相当 简单 了 。 它 的 实现 代码 与 “在 减少 长 度 
属性 时 移 除 元 素 "那个 小 节 的 代码 非常 接近 ， 使 用 了 相同 的 代理 代码 ， 但 这 次 是 在 类 的 构造 器 
中 使 用 它 。 此 处 有 个 完整 的 范例 : 


function toUint32(value) { 
return Math.floor(Math.abs(Number(value))) % Math.pow(2, 32); 


function isArrayIndex(key) { 
let numerickKey = toUint32(key); 
return String(numerickey) == key && numericKey < (Math.pow(2, 32) - 1); 


class MyArray { 
constructor(length=0) { 
this.length = length; 


return new Proxy(this, { 
set(trapTarget, key, value) { 


let currentLength = Reflect.get(trapTarget, "“length"); 


// 特殊 情况 
if (isArrayIndex(key)) { 
let numerickey = Number(key); 


if (numerickKey >= currentLength) { 
Reflect.set(trapTarget, "length", numericKey + 1); 


} 
} else if (key === "length") { 


if (value < currentLength) { 
for (let index = currentLength - 1; index >= value; index--) { 
Reflect.deleteProperty(trapTarget, index); 


// 无 论 键 的 类 型 是 什么 ， 都 要 执行 这 行 代码 
return Reflect.set(trapTarget, key, value); 


3); 


let colors = new MyArray(3); 


console.log(colors instanceof MyArray); ae 
console.log(colors.length) ; S 

colors[0] = "red"; 

colors[1] = "green"; 


colors[2] = "blue"; 
colors[3] = "black"; 


console.log(colors.length) ; tif 


colors.length = 2; 


console.log(colors.length) ; Ui @ 
console.log(colors[3]); // undefined 
console.log(colors[2]); // undefined 
console.log(colors[1]); REEN 
console.log(colors[0]); Li reda 


这 段 代码 创建 了 一 个 MyArray 类 ， 并 从 构造 器 中 返回 了 一 个 代理 。 在 构造 器 中 ， 添 加 了 
length 属性 (使 用 传 入 的 值 进行 初始 化 ， 或 者 在 值 未 提供 的 情况 下 使 用 默认 的 0 ) ， 然 后 
创建 并 返回 了 一 个 代理 。 这 让 colors 变量 看 起 来 就 像 是 MyArray 类 的 一 个 实例 ， 并 且 实 现 
了 数组 的 两 个 关键 行为 。 


虽然 从 类 构造 器 中 返回 一 个 代理 是 很 容易 的 ， 但 这 意味 着 每 个 实例 都 会 创建 一 个 新 的 代理 。 
不 过 你 可 以 将 代理 对 象 作为 原型 使 用 ， 这 样 就 可 以 在 所 有 实例 上 共享 一 个 代理 。 
将 代理 对 象 作为 原型 使 用 


代理 对 象 可 以 被 作为 原型 使 用 ， 但 这 么 做 会 比 本 章 前 面 的 例子 更 复杂 一 些 。 在 把 代理 对 象 作 
为 原型 时 ， 仅 当 操 作 的 默认 行为 会 按 惯例 追踪 原型 时 ， 代 理 陷阱 才 会 被 调用 ， 这 就 限制 了 代 
理 对 象 作 为 原型 时 的 能 力 。 考 虑 这 个 例子 : 


let target = {}; 
let newTarget = Object.create(new Proxy(target, { 


// 永远 不 会 被 调用 


defineProperty(trapTarget, name, descriptor) { 


// 如 果 被 调用 就 会 引发 错误 
return false; 
} 
})); 


Object.defineProperty(newTarget, "name", { 
value: "newTarget" 


}); 


console.log(newTarget.name) ; // "newTarget" 
console.log(newTarget.hasOwnProperty("name")); // true 


一 个 代理 被 作为 原型 创建 了 newTarget 对 象 。 将 target 作为 代理 的 目标 对 象 ， 由 于 该 代理 
是 透明 的 ， target 就 有 效 地 成 为 了 newTarget 的 原型 。 此 时 ， RAS newTarget 将 操作 
传递 给 target 的 时 候 ， 代 理 陷阱 才 会 被 调用 。 


Object.defineProperty() 方法 在 newTarget 上 被 调用 ， 创建 了 一 个 自 有 属性 name 。 定 义 
对 象 属性 的 操作 并 不 会 按 惯例 追踪 对 象 原 型 ， 因 此 代理 上 的 defineproperty 陷阱 函数 永远 不 
会 被 调用 ， 于 是 name 属性 就 被 添加 到 了 newTarget 对 得 上， 成 为 它 的 一 个 自 有 属性 。 


尽管 在 把 代理 对 象 作为 原型 时 会 受到 严重 限制 ， 但 仍然 存在 几 个 很 有 用 的 陷阱 函数 。 


在 原型 上 使 用 get 陷阱 函数 


当 内 部 方法 [[Get]] 被 调用 以 读 取 属性 时 ， 该 操作 首先 会 查找 对 象 的 自 有 属性 ; 如 果 指 定名 
称 的 属性 没有 找到 ， 则 会 继续 在 对 象 的 原型 上 进行 属性 查找 ; 这 个 流程 会 一 直 持 续 到 没有 原 
型 可 供 查 找 为 止 。 


得 益 于 这 个 流程 ， 若 你 设置 了 一 个 get 代理 陷阱 ， 则 只 有 在 对 象 不 存在 指定 名 称 的 自 有 属性 
时 ， 该 陷阱 函数 才 会 在 对 象 的 原型 上 被 调用 。 当 所 访问 的 属性 无 法 保证 存在 时 ， 你 可 以 使 用 
get 陷阱 函数 来 阻止 预期 外 的 行为 。 下 例 创建 了 一 个 对 象 ， 当 你 尝试 去 访问 一 个 不 存在 的 属 
性 时 ， 它 会 抛 出 错误 : 


let target = {}; 
let thing = Object.create(new Proxy(target, { 
get(trapTarget, key, receiver) { 
throw new ReferenceError( ${key} doesn't exist’); 


} 
})); 
thing.name = "thing"; 
console.log(thing.name); (ie ienee 


// 抛 出 错误 
let unknown = thing.unknown; 


这 段 代码 创建 了 一 个 将 代理 作为 原型 的 thing 对 象 。 当 thing 对 象 中 不 存在 指定 键 的 时 
候 ， get 陷阱 函数 就 会 抛 出 错误 。 在 读 取 thing.name 时 ， 因 为 该 属性 存在 于 thing 对 象 
中 ， get 陷阱 函数 没有 被 调用 ; 而 当 读 取 不 存在 的 thing.unknown 属性 时 ， 才 调用 了 get 
陷阱 函数 。 


当 最 后 一 行 代码 执行 时 ， unknown 并 不 是 thing 的 自 有 属性 ， 因 此 查找 操作 延续 到 了 它 的 
原型 上 ， 于 是 get 陷阱 函数 抛 出 了 一 个 错误 。 这 种 自 定义 行为 对 JS 来 说 是 非常 有 用 的 ， 
为 它 能 够 让 JS 像 其 他 语言 那样 、 在 访问 不 存在 的 属性 时 抛 出 错误 ， 而 不 是 静默 地 返回 


undefined ° 


trapTarget 与 receiver 是 不 同 的 对 象 ， 这 对 理解 本 例 是 非常 重要 的 。 当 代理 被 用 作 原 型 
时 ， trapTarget 是 原型 对 象 自身 ， 而 receiver 则 是 实例 对 和 象 。 这 意味 着 在 本 例 中 ， 
trapTarget 等 于 target ° 而 receiver 则 等 于 thing ° 这 就 使 得 你 既 能 访问 代理 的 原始 
目标 对 象 ， 也 能 访问 操作 将 要 涉及 的 对 象 。 


在 原型 上 使 用 set 陷阱 函数 


内 部 方法 [[set]] 同样 会 查找 对 象 的 自 有 属性 ， 并 在 必要 时 继续 对 该 对 象 的 原型 进行 查找 。 
当 你 对 一 个 对 象 属 性 进行 赋值 时 ， 如 果 指 定名 称 的 自 有 属性 存在 ， 值 就 会 被 赋 在 该 属性 上 ; 

而 若 该 自 有 属性 不 存在 ， 则 会 继续 检查 对 象 的 原型 。 微 妙 之 处 在 于 : 尽管 赋值 操作 在 原型 上 
继续 进行 ， 但 默认 情况 下 它 会 在 对 象 实例 (MERA) 上 创建 一 个 新 的 属性 用 于 赋值 ， 无 论 
同名 属性 是 否 存 在 于 原型 上 。 


为 了 更 好 地 了 解 set 陷阱 济 数 何 时 会 在 原型 上 被 调用 、 而 何 时 不 会 ， 可 研究 下 面 这 个 展示 了 
默认 行为 的 示例 : 


let target = {}; 
let thing = Object.create(new Proxy(target, { 
set(trapTarget, key, value, receiver) { 
return Reflect.set(trapTarget, key, value, receiver); 
} 
})); 


console.log(thing.hasOwnProperty("name")); // false 


// PREY ~set Taa) 
thing.name = "thing"; 


console.log(thing.name); // "thing" 
console.log(thing.hasOwnProperty("name")); 77 true 
// RARA “set ”代理 陷阱 

thing.name = "boo"; 

console.log(thing.name); // "boo" 


在 本 例 中 ， target 对 象 起 初 未 拥有 任何 自 有 属性 。 thing 对 象 把 一 个 代理 作为 自身 的 原 
型 ， 并 定义 了 一 个 Set 陷阱 函数 来 捕获 任意 创建 新 属性 的 操作 。 当 thing.name 被 赋值 为 
"thing" 时 ， 因 为 thing 对 象 并 不 存在 一 个 名 为 name 的 自 有 属性 ， set 代理 陷阱 就 被 
调用 。 在 Set 陷阱 函数 中 ” trapTarget 参数 等 于 target  ， 而 receiver 参数 则 等 于 
thing 。 你 可 以 将 receiver 作为 第 四 个 参数 传递 给 Reflect.set() 方法 来 实现 默认 的 行 
为 ， 最 终 一 个 新 的 属性 就 在 thing 对 象 上 被 创建 了 。 


一 旦 thing SHAY name 属性 被 创建 完毕 ， 将 thing.name 另 设 为 其 他 值 就 不 会 再 触发 原型 
上 set 代理 陷阱 ， 因 为 此 时 name 变 成 了 自 有 属性 ， [[Set]] 操作 便 不 会 再 继续 查找 原型 
了 。 


在 原型 上 使 用 has 陷阱 函数 


可 以 回忆 一 下 ， has 陷阱 函数 会 拦截 对 象 上 in 运算 符 的 使 用 。 in 运算 符 首先 查找 对 象 
上 指定 名 称 的 自 有 属性 ; 如 果 不 存在 同名 自 有 属性 ， 则 会 继续 查找 对 象 的 原型 ; 如 果 原 型 上 
也 不 存在 同名 自 有 属性 ， 那 么 就 会 沿 着 原型 链 一 直 查 找 下 去 ， 直 到 找到 该 属性 、 或 者 没有 更 
多 原型 可 供 查找 时 为 止 。 


has 陷阱 函数 只 在 原型 链 查找 触及 原型 对 象 的 时 候 才 会 被 调用 。 当 使 用 代理 作为 原型 时 ， 这 
只 会 在 指定 名 称 的 自 有 属性 不 存在 时 发 生 。 例 如 


let target = {}; 
let thing = Object.create(new Proxy(target, { 
has(trapTarget, key) { 
return Reflect.has(trapTarget, key); 


} 
})); 
// 触发 了 “has” 代 理 陷阱 
console.log("name" in thing); // false 
thing.name = "thing"; 


// 没有 触发 ~has~ 代理 陷阱 
console.log("name" in thing); 7/7 true 


此 代码 在 thing 的 原型 上 创建 了 一 个 nas 代理 陷阱 。 has 陷阱 函数 并 没有 像 get 或 
set 陷阱 函数 那样 传递 一 个 receiver 参数 ， 因 为 当 in 运算 符 被 使 用 时 ， 对 原型 的 查找 是 
自动 的 。 相 反 的 ， has 陷阱 函数 只 能 对 trapTarget 参数 进行 操作 ， 该 参数 等 于 target ° 
本 例 中 第 一 次 使 用 in 运算 符 的 时 候 ， 由 于 thing 并 不 存在 自 有 属性 name ， 于 是 has 
陷阱 函数 就 被 调用 了 。 而 当 thing.name 被 赋值 之 后 ， 再 次 使 用 in 运算 符 ， ha 陷阱 函 
数 则 不 会 被 调用 ， 因为 操作 在 找到 thing 的 自 有 属性 name 后 便 已 停止 。 


这 里 的 原型 范例 都 围绕 着 使 用 object.create() 方法 创建 的 对 象 。 然 而 若 你 想 创建 一 个 以 代 
理 为 原型 的 对 象 ， 流 程 会 有 些 不 同 。 


将 代理 作为 类 的 原型 


由 于 类 的 prototype 属性 是 不 可 写 入 的 ， 因 此 不 能 直接 修改 类 ， 将 代理 用 作 它 的 原型 。 然 而 
你 可 以 使 用 一 点 变通 手段 ， 利 用 继承 来 创建 一 个 把 代理 作为 自身 原型 的 类 。 首 先 你 需要 使 用 
构造 器 函数 创建 一 个 ESS 风格 的 类 定义 。 你 可 以 将 原型 改写 为 一 个 代理 ， 此 处 有 个 例子 : 


function NoSuchProperty() { 
// empty 
} 


NoSuchProperty.prototype = new Proxy({}, { 
get(trapTarget, key, receiver) { 
throw new ReferenceError( ${key} doesn't exist ); 
} 
}); 


let thing = new NoSuchProperty(); 


// Ht ~get> KEG mew T Bik 


let result = thing.name; 


NoSuchProperty 函数 代表 了 将 会 被 用 于 继承 的 基础 类 。 此 函数 的 prototype 属性 不 存在 任 
何 限制 ， 因 此 你 可 以 将 其 改写 为 一 个 代理 ， 其 中 get 陷阱 函数 被 用 于 在 属性 缺失 时 抛 出 错 
误 。 thing 对 象 被 创建 为 Nosuchproperty 类 的 一 个 实例 ， 当 访问 不 存在 的 name 属性 时 ， 
BIR ART h o 


下 一 步 是 创建 一 个 继承 NoSuchProperty 的 类 。 你 可 以 简单 使 用 第 九 章 介绍 过 的 extends 语 
法 ， 来 将 代理 引入 该 类 的 原型 链 ， 就 像 这 样 : 


function NoSuchProperty() { 
// empty 
} 


NoSuchProperty.prototype = new Proxy({}, { 
get(trapTarget, key, receiver) { 
throw new ReferenceError( ${key} doesn't exist’); 
} 
}); 


class Square extends NoSuchProperty { 
constructor(length, width) { 
super(); 
this.length = length; 
this.width = width; 


} 
let shape = new Square(2, 6); 


let areal = shape.length * shape.width; 
console.log(areat); ie Ae 


// 由 于 "wdth" 不 存在 而 抛 出 了 错误 


let area2 = shape.length * shape.wdth; 


Square 类 继承 了 NoSuchProperty 类 ， 因 此 该 代理 就 被 加 入 了 square 类 的 原型 链 。 随 后 

shape 对 象 被 创建 为 square 类 的 一 个 实例 ， 让 它 拥 有 两 个 属性 : length 与 width 。 由 
于 这 两 个 属性 存在 ， get 陷阱 函数 就 永远 不 会 被 调用 ， 因 此 能 够 成 功 读 取 它们 的 值 。 只 有 访 
问 shape 上 不 存在 的 属性 时 (例如 此 处 的 shape.wdth 拼写 错误 ) ， 才 触发 了 get 陷阱 函 
数 并 导致 错误 被 抛 出 。 


这 证 明了 该 代理 存在 于 shape 的 原型 链 中 ， 但 这 可 能 并 不 明显 ， 因 为 该 代理 不 是 shape 的 
直接 原型 。 事 实 上 ， 该 代理 需要 用 两 步 才 能 从 shape 的 原型 链 上 被 找到 。 你 可 以 修改 前 面 的 
例子 来 更 清晰 地 领会 这 一 点 : 


function NoSuchProperty() { 
// E 


// 对 于 将 要 用 作 原 型 的 代理 ， 存 储 对 其 的 一 个 引用 
let proxy = new Proxy({}, { 
get(trapTarget, key, receiver) { 
throw new ReferenceError( ${key} doesn't exist’); 


}); 

NoSuchProperty.prototype = proxy; 
class Shape extends NoSuchProperty { 
constructor(length, width) { 

super(); 


this.length = length; 
this.width = width; 


let shape = new Square(2, 6); 

let shapeProto = Object.getPrototypeOf (shape) ; 
console.log(shapeProto === proxy); // false 
let secondLevelProto = Object.getPrototypeOf(shapeProto); 


console.log(secondLevelProto === proxy); (cue 


这 个 版 本 的 代码 将 代理 存储 在 一 个 名 为 proxy 的 变量 中 ， 以 便 之 后 可 以 简单 识别 。 shape 
的 原型 是 square.prototype ， 它 并 不 是 一 个 代理 。 然 而 shape.prototype 的 原型 却 是 一 个 从 
NoSuchProperty 继承 下 来 的 代理 。 


继承 行为 在 原型 链 上 增加 了 一 步 ? 明白 这 一 点 很 重要 ， 因为 在 proxy 变量 上 调用 get 陷阱 
函数 的 操作 也 需要 多 进行 一 步 2 如 果 欲 使 用 的 属性 存在 于 Shape.prototype 上 ， 那么 这 就 会 
防止 get 代理 陷阱 被 调用 ， 正 如 此 例 : 


function NoSuchProperty() { 
// empty 


} 


NoSuchProperty.prototype = new Proxy({}, { 
get(trapTarget, key, receiver) { 
throw new ReferenceError( ${key} doesn't exist ); 
} 
H); 


class Square extends NoSuchProperty { 
constructor (length, width) { 
super(); 
this.length = length; 
this.width = width; 
} 


getArea() { 
return this.length * this.width; 
} 
} 


let shape = new Square(2, 6); 


let areal = shape.length * shape.width; 
console.log(areat1); ip E 


let area2 = shape.getArea(); 
console.log(area2); Yip ale 


// 由 于 "wdth" 不 存在 而 抛 出 了 错误 


let area3 = shape.length * shape.wdth; 


此 处 的 square 类 拥有 一 个 getArea() 方法 ， 该 方法 被 自动 添加 到 square.prototype 上 ， 
因此 当 shape.getArea() 被 调用 时 ， 对 于 getArea() 方法 的 查找 从 shape 实例 上 开始 ， 并 
延续 到 它 的 原型 上 。 由 于 在 原型 上 找到 了 getArea() 方法 ， 查 找 就 停止 了 ， 代 理 也 没有 被 调 
用 。 在 本 例 的 条 件 下 ， 这 正 是 你 想 要 的 行为 ， 而 不 应 当 在 getArea() 被 调用 时 抛 出 错误 。 


尽管 使 用 了 一 点 额外 的 代码 来 创建 一 个 类 ， 才 让 代理 存在 于 该 类 的 原型 链 上 ， 但 当 你 确实 需 
要 这 样 的 功能 时 ， 这 种 付出 仍然 是 值得 的 。 


结 


as 
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在 ES6 之 前 ， 数 组 之 类 的 特定 对 象 会 显示 出 一 些 非 常规 的 、 无 法 被 开发 者 复制 的 行为 ， 而 代 
理 的 出 现 改 变 了 这 种 情况 。 代 理 允 许 你 为 一 些 JS 底层 操作 自行 定义 非常 规 行为 ， 因 此 你 就 可 
以 通过 代理 陷阱 来 复制 JS 内 置 对 象 的 所 有 行为 。 在 各 种 不 同 操作 发 生 时 (例如 对 于 in 运 
算 符 的 使 用 ) ， 这 些 代 理 陷阱 会 在 后 台 被 调用 。 


反射 接口 也 是 在 ES6 中 引入 的 ， 人 允许 开发 者 为 每 个 代理 陷阱 实现 默认 的 行为 。 每 个 代理 陷阱 
在 ES6 的 另 一 个 新 特性 Reflect 对 象 上 都 有 一 个 同名 的 对 应 方法 。 将 代理 陷阱 与 反射 接口 
方法 结合 使 用 ， 就 可 以 在 特定 条 件 下 让 一 些 操作 有 不 同 的 表现 ， 有 别 于 默认 的 内 置 行为 。 


可 被 撤销 的 代理 是 一 种 特殊 的 代理 ， 可 以 使 用 revoke() BHAA BAA © revoke() 函数 
终结 了 代理 的 所 有 功能 ， 因 此 在 它 被 调用 之 后 ， 所 有 与 代理 属性 交互 的 意图 都 会 导致 抛 出 错 
误 。 第 三 方 开发 者 可 能 需要 在 一 定时 间 内 获取 特定 对 象 的 使 用 权 ， 在 这 种 场合 ， 可 被 撤销 的 
代理 对 应 用 的 安全 性 来 说 就 非常 重要 。 


尽管 直接 使 用 代理 是 最 有 力 的 使 用 方式 ， 但 你 也 可 以 把 代理 用 作 其 他 对 象 的 原型 。 但 只 有 很 
少 的 代理 陷阱 能 在 作为 原型 的 代理 上 被 有 效 使 有 用， 包括 get 、 set 与 has 这 几 个 ， 这 方 
面 的 用 例 也 因此 变 得 十 分 有 限 。 


第 十 三 章 用 模块 封装 代码 


JS “共享 一 切 ” 的 代码 加 载 方式 是 该 语言 混乱 且 最 易 出 错 的 方面 之 一 。 其 他 语言 使 用 包 ( 
package ) 之 类 的 概念 来 定义 代码 的 作用 域 ， 然 而 在 ES6 之 前 ， 一 个 应 用 的 每 个 JS 文件 所 
定义 的 所 有 内 容 都 由 全 局 作用 域 共享 。 当 web 应 用 变 得 更 加 复杂 、 需 要 使 用 越 来 越 多 的 JS 
代码 时 ， 这 种 方式 导致 了 诸多 问题 ， 例 如 命名 冲突 、 安 全 问题 等 。ES6 的 设计 目标 之 一 就 是 
要 解决 作用 域 问题 ， 并 让 JS 应 用 变 得 更 有 条 理 。 这 便 是 模块 的 切入 点 。 


o 何 为 模块 ? 
© 基本 的 导出 
e 基本 的 导入 
o 导入 单个 绑 定 
o 导入 多 个 绑 定 
o 完全 导入 一 个 模块 
o 导入 绑 定 的 一 个 微妙 怪异 点 
e 重 命名 导出 与 导入 
o 模块 的 默认 值 
o 导出 默认 值 
o 导入 默认 值 
o 绑 定 的 再 导出 
© 无 绑 定 的 导入 
© 加 载 模块 
o 在 Web 浏览 器 中 使 用 模块 
a 在 script 标签 中 使 用 模块 
a Web 浏览 器 中 的 模块 加 载 次 序 
m Web 浏览 器 中 的 异步 模块 加 载 
m 将 模块 作为 Worker 加 载 
o 浏览 器 模块 说 明 符 方案 


” 
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何 为 模块 ? 


模块 ( Modules ) 是 使 用 不 同方 式 加 载 的 JS 文件 〈 与 JS 原先 的 脚本 加 载 方式 相对 ) 。 这 
种 不 同 模式 很 有 必要 ， 因 为 它 与 脚本 〈 script) 有 大 大 不 同 的 语义 : 


.模块 代码 自动 运行 在 严格 模式 下 ， 并 且 没 有 任何 办 法 跳出 严格 模式 ; 

2. 在 模块 的 顶级 作用 域 创建 的 变量 ， 不 会 被 自动 添加 到 共享 的 全 局 作用 域 ， 它 们 只 会 在 模 
块 顶级 作用 域 的 内 部 存在 ; 

3， 模 块 顶级 作用 域 的 this 值 为 undefined 


4. 模块 不 允许 在 代码 中 使 用 HTML 风格 的 注释 (这 是 JS 来 自 于 早期 浏览 器 的 历史 遗留 特 
PE) 5 

5. 对 于 需要 让 模块 外 部 代码 访问 的 内 容 ， 模 块 必须 导出 它们 ; 

6. 人 允许 模块 从 其 他 模块 导入 绑 定 。 


这 些 差异 乍 一 看 似乎 很 小 ， 但 它们 代表 了 JS 代码 加 载 与 执行 方面 的 显著 改变 ， 我 将 在 整 章 中 
对 其 进行 论述 。 模 块 的 贤 实 力量 是 按 需 导出 与 导入 代码 的 能 力 ， 而 不 用 将 所 有 内 容 放 在 同一 
个 文件 内 。 对 于 导出 与 导入 的 清楚 理解 ， 是 辨别 模块 与 脚本 差异 的 基础 。 


基本 的 导出 


你 可 以 使 用 export 关键 字 将 已 发 布 代 码 部 分 公开 给 其 他 模块 。 最 简单 方法 就 是 将 export 
放置 在 任意 变量 、 函 数 或 类 声明 之 前 ， 从 模块 中 将 它们 公开 出 去 ， 就 像 这样 : 


// 导出 数据 
export var color = "red"; 
export let name = "Nicholas"; 


export const magicNumber = 7; 


// 导出 函数 
export function sum(numi, num2) { 
return numi + numi; 


} 


// 导出 类 
export class Rectangle { 
constructor(length, width) { 
this.length = length; 
this.width = width; 


} 


// 此 函数 为 模块 私有 
function Subtract(num1，num2) { 
return numi - num2; 


} 


ZT 
function multiply(numi, num2) { 
return numi * num2; 


} 


// .…. 稍 后 将 其 导出 
export { multiply }; 


此 例 中 有 几 点 需要 注意 首先 ， 除 了 export 关键 字 之 外 ? 每 个 声 明 都 与 正常 形 式 完 全 一 
样 。 每 个 被 导出 的 函数 或 类 都 有 名 称 ， 这 是 因为 导出 的 函数 声明 与 类 声明 必须 要 有 名 称 。 你 
不 能 使 用 这 种 语法 来 导出 匿名 六 数 或 匿名 类 ， 除 非 使 用 了 defaut 关键 字 (在 “模块 的 默认 


其 次 ? 细 看 一 下 multiply() BR BX > 它 并 没有 在 定义 时 被 导出 。 这 是 因为 你 不 仅 能 导出 声 
明 ， 还 可 以 导出 引用 ( 即 代码 最 后 一 行 ) 。 


最 后 请 注意 ， 此 例 并 未 导出 subtract) 函数 。 此 函数 在 模块 外 部 不 可 访问 ， 因 为 任意 没有 
被 显 式 导出 的 变量 、 函 数 或 类 都 会 在 模块 内 保持 私有 。 
基本 的 导入 


一 旦 你 有 了 包含 导出 的 模块 ， 就 能 在 其 他 模块 内 使 用 import 关键 字 来 访问 已 被 导出 的 功 
能 。 import 语句 有 两 个 部 分 ， 一 是 需要 导入 的 标识 符 ， 二 是 需 导 入 的 标识 符 的 来 源 模块 。 
此 处 是 导入 语句 的 基本 形式 : 


import { identifier1, identifier2 } from "./example.js"; 


在 import 之 后 的 花 括号 指明 了 从 给 定 模块 导入 对 应 的 绑 定 ， from 关键 字 则 指明 了 需要 导 
ae 。 模 块 由 一 个 表示 模块 路 径 的 字符 串 (被 称 为 模块 说 明 符 ，module specifier ) 来 

。 在 浏览 览 器 器 环境 中 导入 模块 ， 使 用 与 <script> 元 素 相 同 的 路 径 格式 , 这 表示 你 必须 在 
其 na 含 文件 扩展 名 。 而 另 一 方面 Node.js 则 遵循 了 — 统 惯例 ， 基 于 文件 系统 前 组 来 分 
辩 本 地 文件 与 包 ( package ) ， 例 如 ， example 代表 一 个 包 ， 而 ,/example.js 则 代表 一 个 
本 地 文件 。 


导入 绑 定 的 列表 看 起 来 与 对 象 解构 相似 ， 但 实则 并 无 关联 。 
当 从 模块 导入 了 一 个 绑 定 时 ， 该 绑 定 表现 得 就 像 使 用 了 const 的 定义 。 这 意味 着 你 不 能 再 定 
义 另 一 个 同名 变量 (和 包括 导入 另 一 个 同名 绑 定 ) ， 也 不 能 在 对 应 的 import 语句 之 前 使 用 此 
标识 符 (也 就 是 要 受 暂 时 性 死 区 限制 ) ， 更 不 能 修改 它 的 值 。 
导入 单个 绑 定 


对 于 “基本 的 导入 ”小 节 的 第 一 个 例子 ， 先 假设 它 位 于 一 个 文件 名 为 example.js 的 模块 内 。 你 
能 用 多 种 方式 来 导入 并 使 用 来 自 该 模块 的 绑 定 。 例 如 ， 你 可 以 仅 导 入 一 个 标识 符 : 


// 单个 导入 
import { sum } from "./example.js"; 


console.log(sum(1, 2)); Hie & 


sum = 1; // Bae 


尽管 example.js 并 非 只 导出 了 一 个 sum() 函数 ， 但 本 例 仅 仅 导 入 了 此 函数 。 假 若 你 尝试 给 
sun 赋 一 个 新 值 ， 由 于 不 允许 对 已 导入 的 绑 定 重新 赋值 ， 于 是 就 会 导致 错误 。 


要 确保 在 导入 的 文件 名 前 面 使 用 / 、 ./ 或 ../ ， 以 便 在 浏览 器 与 Nodejs 之 问 保 
持 良好 兼容 性 。 


导入 多 个 绑 定 
如 果 你 想 从 example 模块 导入 多 个 绑 定 ， 你 可 以 像 下 面 这 样 显 式 的 列 出 它们 : 


// 多 个 导入 

import { sum, multiply, magicNumber } from "./example.js"; 
console.log(sum(1, magicNumber)); Hit 
console.log(multiply(1, 2)); iif a 


此 处 从 example 模块 导入 了 三 个 绑 定 : sum ` multiply 与 magicNumber ， 之 后 便 可 以 使 
用 它们 ， 念 佛 它们 是 在 当前 模块 中 被 定义 的 。 


完全 导入 一 个 模块 


还 有 一 种 特殊 情况 ， 即 允许 你 将 整个 模块 当 作 单一 对 象 进行 导入 ， 该 模块 的 所 有 导出 都 会 作 
为 对 象 的 属性 存在 。 例 如 : 


LUE ETA 

import * as example from "./example.js"; 

console.log(example.sum(1, 
example.magicNumber ) ); L/S 

console.log(example.multiply(i, 2)); Mp @ 


在 此 代码 中 ， example.js 中 所 有 导出 的 绑 定 都 被 加 载 到 一 个 名 为 example 的 对 象 中 ， 具 名 
导出 ( sum() 函数 、 multiple() 函数 与 magicNumber ) 都 成 为 example 的 可 用 属性 。 这 
种 导入 格式 被 称 为 命名 空间 导入 〈 namespace import ) ， 这 是 因为 该 example 对 象 并 不 
存在 于 examle.js 文件 中 ， 而 是 作为 一 个 命名 空间 对 象 被 创建 使 用 ， 其 中 包含 了 
example.js 的 所 有 导出 成 员 z 


然而 要 记 住 ， 无 论 你 对 同一 个 模块 使 用 了 多 少 次 import 语句 ， 该 模块 都 只 会 被 执行 一 次 。 
在 导出 模块 的 代码 执行 之 后 ， 已 被 实例 化 的 模块 就 被 保留 在 内 存 中 ， 并 随时 都 能 被 其 他 
import 所 引用 。 研 究 以 下 例子 : 


import { sum } from "./example.js"; 
import { multiply } from "./example.js"; 
import { magicNumber } from "./example.js"; 


尽管 此 处 的 模块 使 用 了 三 个 import 724) > 12 example.js 只 会 被 执行 一 次 。 若 同一 个 应 用 
中 的 其 他 模块 打算 从 example.js 导入 绑 定 ， 则 那些 模块 都 会 使 用 这 段 代码 中 所 用 的 同一 个 
模块 实例 。 


第 十 三 章 用 模块 封装 代码 


模块 语法 的 限制 (Module Syntax Limitations ) 


export 与 import 都 有 一 个 重要 的 限制 ， 那 就 是 它们 必须 被 用 在 其 他 语句 或 表达 式 的 
外 部 。 例 如 ， 以 下 代码 有 语法 错误 : 


abi ERI af 
export flag; // 语法 错误 


此 处 的 export 语句 位 于 一 个 if 语句 内 部 ， 这 是 不 被 许可 的 。 导 出 语句 不 能 是 有 条 件 
j ， 也 不 能 以 任何 方式 动态 使 用 。 原 因 之 一 是 模块 语法 需要 让 JS 能 静态 判断 需要 导出 什 
， 正 因为 此 ， 你 只 能 在 模块 的 顶级 作用 域 使 用 export ° 


类 似 的 ， 你 不 能 在 一 个 语句 内 部 使 用 import ， 也 只 能 将 其 用 在 顶级 作用 域 。 这 意味 着 
以 下 代码 也 有 语法 错误 : 


function tryImport() { 
import flag from "./example.js"; // 语法 错误 


} 


出 于 与 不 能 动态 导出 绑 定 相同 的 原因 ， 你 也 不 能 动态 导入 绑 定 。 export 与 import * 
键 字 被 设计 为 静态 的 ， 以 便 让 诸如 pyrene 类 的 工具 能 轻易 判断 模块 有 哪些 信息 可 
用 “。 


导入 绑 定 的 一 个 微妙 怪异 点 


ES6 的 import 语 旬 为 变量 、 函 数 与 类 创建 了 只 读 绑 定 ， 而 不 像 普 通 变量 那样 简单 引用 了 原 
始 绑 定 。 尽 管 导 入 绑 定 的 模块 无 法 修改 绑 定 的 值 ， 但 负责 导出 的 模块 却 能 做 到 这 一 点 。 例 
如 ， 假 设 你 想 要 使 用 以 下 模块 : 


export var name = "Nicholas"; 
export function setName(newName) { 
name = newName; 


} 


当 你 导入 了 这 两 个 绑 定 后 ， setName() 函数 还 可 以 改变 name 的 值 : 


import { name, setName } from "./example.js"; 


console.log(name); // "Nicholas" 
setName("Greg"); 

console.log(name); // “Greg! 
name = "Nicholas"; Henno 
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调用 setName("Greg") 会 回 到 导出 setName() 的 模块 内 部 ， 并 在 那里 执行 ， 从 而 将 name 设 
置 为 "Greg" 。 注意 这 个 变化 会 自动 反映 到 所 导入 的 name 绑 定 上 ， 这 是 因为 绑 定 的 name 
是 导出 的 name 标识 符 的 本 地 名 称 2 二 者 并 非 同 一 个 事物 ® 


译注 : 对 本 小 节 内 容 进行 补充 说 明 


Teta = I 

let b = a; 

console.log(a); el 
console.log(b); Hip al 
a= 2; 

console.log(a); 7/2 
console.log(b); Hip al 


在 此 代码 中 ， 变 量 b 开始 时 貌似 对 变量 a 进行 了 一 个 “引用 ”， 但 只 是 将 a 的 值 拷贝 
了 一 份 。 如 果 对 变量 a 的 值 进 行 修改 ， 变 量 b 的 值 是 不 会 随 着 变化 的 


o 


而 在 范例 中 的 模块 导入 与 导出 ， 外 部 模块 导入 的 name 变量 与 在 example.js 模块 内 部 
的 name 变量 对 比 ， 前 者 是 对 于 后 者 的 只 读 引 用 ， 会 始终 反映 出 后 者 的 变化 。 就 算 后 者 
的 值 在 负责 导出 的 模块 中 发 生 了 变化 ， 这 种 绑 定 关系 也 不 会 被 破坏 。 


重 命名 导出 与 导入 


有 了 时， 你 可 能 并 不 想 使 用 从 模块 中 导出 的 变量 、 函 数 或 类 的 原始 名 称 。 幸 好 ， 你 可 以 更 改 导 
出 的 名 称 ， 无 论 是 在 导出 过 程 中 ， 还 是 在 导入 过 程 中 。 

前 一 种 情况 下 ， 假 设 你 想 用 不 同 的 名 称 来 导出 一 个 函数 ， 你 可 以 使 用 as 关键 字 来 指定 新 的 
名 称 ， 以 便 在 模块 外 部 用 此 名 称 指 代目 标 函 数 : 


function sum(numi, num2) { 
return numi + num2; 


} 


export { sum as add }; 


此 处 的 sum() HARIA add() 导出 ， 前 者 是 本 地 名 称 〈 local name ) ， 后 者 则 是 导出 
名 称 〈exported name ) 。 这 意味 着 当 另 一 个 模块 要 导入 此 函数 时 ， 它 必须 改 用 add 这 个 
名 称 : 


import { add } from "./example.js"; 


假若 模块 导入 有 函数 时 想 使 用 另 一 个 名 称 ， 同 样 也 可 以 用 as 关键 字 : 


import { add as sum } from "./example.js"; 
console.log(typeof add); // “undefined" 
console.log(sum(1, 2)); Hie S) 


此 代码 导入 了 add() 函数 ， 并 使 用 了 导入 名 称 (import name ) 将 其 重 命名 为 sum) 
(本 地 名 称 ) 。 这 意味 着 在 此 模块 中 并 不 存在 名 为 add 的 标识 符 。 


模块 的 默认 值 


模块 语法 确实 为 从 模块 中 导出 或 导入 默认 值 进 行 了 优化 ， 而 这 一 模式 在 其 他 模块 系统 中 非常 
普遍 ， 例 如 在 CommonJS (在 浏览 器 之 外 运行 JS 的 另 一 种 模块 规范 ) 中 。 模 块 的 默认 值 ( 
default value ) 是 使 用 default 关键 字 所 指定 的 单个 变量 、 函 数 或 类 ， 而 你 在 每 个 模块 中 
只 能 设置 一 个 默认 导出 ， 将 default 关键 字 用 于 多 个 导出 会 是 语法 错误 。 


导出 默认 值 
以 下 是 使 用 default 关键 字 的 一 个 简单 例子 


export default function(numi, num2) { 
return numi + num2; 


} 


此 模块 将 一 个 函数 作为 默认 值 进 行 了 导出 ， default 关键 字 标明 了 这 是 一 个 默认 导出 。 此 元 
数 并 不 需要 有 名 称 ， 因 为 它 就 代表 这 个 模块 自身 。 


你 也 能 在 export default 后 面 放 置 一 个 标识 符 ， 以 指定 默认 的 导出 ， 正 如 : 


function sum(numi, num2) { 
return numi + num2; 


} 


export default sum; 


yya OC aa 它 作 为 模块 的 默认 值 被 导出 。 若 默认 值 需 要 计算 才能 得 
出 ， 你 或 许 会 选择 这 种 方式 。 


将 标识 符 作为 默认 导出 来 指定 的 第 三 种 方式 ， 是 使 用 重 命名 语法 ， 如 下 : 


function sum(numi, num2) { 
return numi + num2; 


} 


export { sum as default }; 


default 标识 符 有 特别 含义 ， 既 作为 重 命名 导出 ， 又 标明 了 模块 需要 使 用 的 默认 值 。 由 于 
default 在 JS 中 是 一 个 关键 字 ， 它 就 不 能 被 用 作 变 量 、 兄 数 或 类 的 名 称 (但 它 可 以 被 用 作 
属性 名 称 ) 。 因 此 使 用 defaut 来 重 命 名 一 个 导出 是 个 特例 ， 与 非 默 认 导 出 的 语法 保持 了 一 
致 性 。 若 你 想 用 单个 语句 一 次 性 进行 多 个 导出 ， 并 要 求 包含 默认 导出 ， 这 种 语法 就 非常 有 
用 o 

导入 默认 值 

你 可 以 使 用 如 下 语法 来 从 一 个 模块 中 导入 默认 值 : 


// 导入 默认 值 
import sum from "./example.js"; 


console.log(sum(i, 2)); ES 


这 个 导入 语句 从 example.js 模块 导入 了 其 默认 值 。 注 意 此 处 并 未 使 用 花 括 号 ， 与 之 前 在 非 
默认 的 导入 中 看 到 的 不 同 。 本 地 名 称 sum 被 用 于 代表 目 cients 出 的 函数 。 这 种 语法 
是 最 简洁 的 ， 而 ES6 的 标准 制定 者 也 期 待 它 成 为 在 网 络 上 进行 导入 的 主要 形式 ， 这 样 你 就 能 
导入 已 存在 的 对 象 。 


对 于 既 导 出 了 黑 认 值 、 又 导出 了 一 个 或 更 多 非 黑 认 的 绑 定 的 模块 ， 你 可 以 使 用 单个 语句 来 导 
入 它 的 所 有 导出 绑 定 。 例 如 ， 假 设 你 有 这 人 么 一 个 模块 : 

export let color = "red"; 

export default function(numi, num2) { 


return numi + num2; 


} 


你 可 以 像 下 面 这 样 使 用 import 语句 ， 来 同时 导入 color 以 及 作为 默认 值 的 函数 : 


import sum, { color } from "./example.js"; 


console.log(sum(1, 2)); py @ 
console.log(color); VAr edi 


过 号 将 默认 的 本 地 名 称 与 非 默 认 的 名 称 分 隔 开 ， 后 者 仍 昌 被 花 括号 所 包 衰 。 要 记 住 在 import 
语句 中 默认 名 称 必须 位 于 非 默 认 名 称 之 前 。 


如 同 导 出 默认 值 ， 你 也 能 使 用 重 命名 语法 进行 默认 值 的 导入 : 


// FF EDT 
import { default as sum, color } from "example"; 


console.log(sum(1, 2)); py ® 
console.log(color); /f red! 


在 此 代码 中 ， 黑 认 的 导出 ( default ) 被 重 命名 为 sum ° HAM AA color 导出 也 被 一 
并 导入 了 。 此 例 与 前 面 的 例子 是 等 效 的 。 


绑 定 的 再 导出 


年 当前 模块 ae (例如 ， oe 
ey peer 过 的 模式 来 将 已 导入 的 值 再 导出 ， 就 像 这 


import { sum } from "./example.js"; 
export { sum } 


此 方法 能 奏效 ， 但 还 可 以 使 用 单个 语句 来 完成 相同 任务 : 


export { sum } from "./example.js"; 


这 种 形式 的 export 会 进入 指定 模块 查看 sum 的 定义 ， 随 后 将 其 导出 。 当 然 ， 你 也 可 以 选 
择 将 一 个 值 用 不 同名 称 导 出 : 


export { sum as add } from "./example.js"; 
此 处 ， 从 ",/example.js"” 导入 的 sum 随后 以 add 的 名 称 被 导出 了 。 
若 你 想 将 来 自 另 一 个 模块 的 所 有 值 完 全 导出 ， 可 以 使 用 星 号 ( * ) RA: 


export * from "./example.js"; 


使 用 完全 导出 ， 就 可 以 导出 目标 模块 的 默认 值 及 其 所 有 具名 导出 ， 但 这 可 能 影响 你 从 当前 模 
块 所 能 导出 的 值 。 例 如 ， 人 假设 example.js 具有 一 个 默认 导出 ， 当 你 使 用 这 种 语法 时 ， 你 就 
无 法 为 当前 模块 另外 再 定义 一 个 默认 导出 。 


无 绑 定 的 导入 


有 些 模块 也 许 没 有 进行 任何 导出 ， 相 反 只 是 修改 全 局 作用 域 的 对 象 。 尽 管 这 种 模块 的 顶级 变 
量 、 函 数 或 类 最 终 并 不 会 自动 被 加 入 全 局 作用 域 ， 但 这 并 不 意味 着 该 模块 无 法 访问 全 局 作用 
域 。 诸 如 Array 与 Object 之 类 的 内 置 对 象 的 共享 定义 在 模块 内 部 是 可 访 问 的 ， 并 且 对 于 这 


些 对 象 的 修改 会 反映 到 其 他 模块 中 。 


例如 ， 若 你 想 为 所 有 数组 添加 一 个 pushall() 方法 ， 你 可 以 像 下 面 这 样 定 义 一 个 模块 : 


// 没有 导出 与 导入 的 模块 


Array.prototype.pushAll = function(items) { 


// items 必须 是 一 个 数组 
if (!Array.isArray(items)) { 
throw new TypeError("Argument must be an array."); 


} 


// 使 用 内 置 的 push() 与 扩展 运算 符 
return this.push(...items); 


}; 


这 是 一 个 有 效 的 模块 ， 尽 管 此 处 没有 任何 导出 与 导入 。 此 代码 可 以 作为 模块 或 脚本 来 使 用 。 
于 它 没有 导出 任何 东西 ， 你 可 以 使 用 简化 的 导入 语法 来 执行 此 模块 的 代码 ， 而 无 须 导入 任 
何 绑 定 : 


import "./example.js"; 


let colors = ["red", “green”, “blue ]|; 
let items = []; 


items.pushAll(colors); 


此 代码 导入 并 执行 了 包含 pushall() 的 模块 ， 于 是 pushall() 就 被 添加 到 数组 的 原型 上 。 
这 意味 着 现在 pushall() 在 当前 模块 内 的 所 有 数组 上 都 可 用 。 


无 绑 定 的 导入 最 有 可 能 被 用 于 创建 polyfill 与 shim (为 新 语法 在 加 环境 中 运行 提供 向 下 
兼容 的 方式 ) 


加 载 模块 


尽管 ES6 定义 了 模块 的 语法 ， 但 并 未 定义 如 何 加 载 它们 。 这 是 规范 复杂 性 的 一 部 分 ， 这 种 复 
杂 性 对 于 实现 环境 来 说 是 无 法 预知 的 。 ES6 未 选择 给 所 有 JS 环境 努力 创建 一 个 有 效 的 单一 

规范 ， 而 只 规定 了 语法 ， 并 指定 定 了 一 个 未 定义 的 内 部 操作 HostResolveImportedModule 的 抽 R 
加 载 机 制 。 web 浏览 器 与 Node.js 可 以 自行 决定 用 什么 方式 实现 HostResolveImportedModule 

， 以 便 更 好 契合 各 自 的 环境 


在 Web ï) A 中 使 用 模 


即使 在 ES6 之 前 ，web 浏览 器 都 有 多 种 方式 在 web 应 用 中 加 载 JS 。 这 些 可 能 的 脚本 加 载 
选择 是 


1. 使 用 <script> 元 素 以 及 sro 属性 来 指定 代码 加 载 的 位 置 ， 以 便 加 载 JS 代码 文件 ; 
2. 使 用 <script> 元 素 但 不 使 用 sro Æ> KRAAI JS 代码 ; 
3. 加载 JS 代码 文件 并 作为 Worker (例如 Web Worker 或 Service Worker ) 来 执行 


为 了 完全 支持 模块 ，wWeb 浏览 器 必须 更 新 这 些 机 制 。 相 关 细 节 被 定义 在 HTML 规范 中 ， 我 将 
会 在 本 节 对 其 进行 概述 。 


在 Script 标签 中 使 用 模块 


<script> 元 素 默 认 以 脚本 而 非 模块 方式 来 加 载 JS 文件 ， 只 要 type 属性 缺失 ， 或 者 type 

属性 含有 与 JS 对 应 的 内 容 类 型 (例如 "text/javascript" ) 。 <script> 元 素 能 够 执行 内 联 
脚本 ， 也 能 加 载 在 src 中 指 定 的 文件 。 为 了 支持 模块 > 添加 了 "module" 值 作为 type 的 
选项 。 将 type 设置 为 "module" ， 就 告诉 浏览 器 要 将 内 联 代码 或 是 指定 文件 中 的 代码 当 作 
模块 ， 而 不 是 当 作 脚本 。 此 处 有 个 简单 范例 : 


<!-- load a module JavaScript file --> 
<script type="module" src="module.js"></script> 


<!-- include a module inline --> 
<script type="module"> 


import { sum } from "./example.js"; 
let result = sum(1, 2); 


</script> 


此 例 中 第 一 个 <script> 元 素 使 用 src 加 载 了 外 部 模块 文件 ， 与 加 载 脚本 唯一 的 区 别 是 将 
type 指定 为 "module" 。 第 二 个 <script> 元 素 则 包含 了 一 个 直接 谋 入 到 网 页 内 的 模块 ， 
result 变 变量 并 未 被 暴露 到 全 局 ， 因 为 它 只 在 使 用 <script> 元 素 定 义 的 这 个 模块 内 部 存在 
因此 也 没有 被 添加 为 window 对 象 的 属性 。 


正如 你 所 见 ， 在 网 页 中 包含 模块 十 分 简单 ， 并 且 类 似 于 包含 脚本 。 然 而 ， 在 如 何 加 载 模块 方 
面 有 一 些 区 别 。 


你 可 能 已 经 注意 到 "module" 并 不 是 与 "text/javascript" 相似 的 内 容 类 型 。 模 块 JS 
文件 的 内 容 类 型 与 脚本 JS 文件 相同 ， 因 此 不 可 能 依据 文件 的 内 容 类 型 将 它们 完全 区 别 开 
来 。 此 外 ， 当 type 属性 无 法 辨认 时 ， 浏 览 器 就 会 忽略 <script> 7U% 素 ， 因 此 不 支持 模 
块 的 浏览 器 也 就 会 自动 忽略 <script type="module"> 声明 ， 从 而 提供 良好 的 向 下 兼容 

性 。 


Web 浏览 器 中 的 模块 加 载 次 序 


模块 相对 脚本 的 独特 之 处 在 于 : 它们 能 使 用 import 来 指定 必须 要 加 载 的 其 他 文件 ， 以 保证 
正确 执行 。 为 了 支持 此 功能 ? <script type="module"> 总 是 自动 应 用 defer 属性 。 


defer 属性 是 加 载 脚本 文件 时 的 可 选项 ， 但 在 加 载 模块 文件 时 总 是 自动 应 用 的 。 当 HTML 解 
析 到 拥有 src 属性 的 <script type="module"> 标签 时 ， 就 会 立即 开始 下 载 模块 文件 ， 但 并 

不 会 执行 它 ， 直 到 整个 网 页 文档 全 部 解析 完 为 止 。 模 块 也 会 按照 它们 在 HTML 文件 中 出 现 的 

顺序 依次 执行 ， 这 意味 着 第 一 个 <script type="module"> 总 是 保证 在 第 二 个 之 前 执行 ， 即 使 
其 中 有 些 模块 不 是 用 src 指定 而 是 包含 了 内 联 脚 本 。 例 如 : 


<!-- this will execute first --> 
<script type="module" src="module1.js"></script> 


<!-- this will execute second --> 
<script type="module"> 
import { sum } from "./example.js"; 


let result = sum(1, 2); 
</script> 


<!-- this will execute third --> 
<script type="module" src="module2.js"></script> 


这 三 个 <script> 元 素 依照 它们 被 指定 的 顺序 执行 ， 因 此 moduler.js 保证 在 内 联 模块 之 前 
执行 ， 而 内 联 模 块 又 保证 在 module2.js 之 前 执行 。 


每 个 模块 可 能 都 用 import 导入 了 一 个 或 多 个 其 他 模块 ， 这 就 让 事情 变 复 杂 了 。 这 也 就 是 模 
块 为 何 首 先 需要 被 解析 ， 因 为 这 样 才能 识别 所 有 的 import 语句 。 每 个 import 语句 又 会 触 
发 一 次 fetch (无 论 是 从 网 络 还 是 从 缓存 中 获取 ) ， 并 且 在 所 有 用 import 导入 的 资源 被 加 载 
与 执行 完毕 之 前 ， 没 有 任何 模块 会 被 执行 。 


所 有 模块 ， 无 论 是 用 <script type="module"> 显 式 包含 的 ， 还 是 用 import BEY 包含 的 ， 都 
会 依照 次 序 加 载 与 执行 。 在 前 面 的 范例 中 ， 完 整 的 加 载 次 序 是 : 


1. 下 载 并 解析 module1.js ， 

2. 递归 下 载 并 解析 在 module1.js 中 使 用 import 导入 的 资源 ; 
3. 解析 内 联 模块 ; 
4. 递归 下 载 并 解析 在 内 联 模 块 中 使 用 import 导入 的 资源 ; 

5. 下 载 并 解析 module2.js ， 

6. 递归 下 载 并 解析 在 module2.js 中 使 用 import 导入 的 资源 。 





一 旦 加 载 完 毕 ， 直 到 页 面 文档 被 完整 解析 之 前 ， 都 不 会 有 任何 代码 被 执行 。 在 文档 解析 完毕 
后 ， 会 发 生 下 列 行 为 : 


1. 递归 执行 module1.js 导入 的 资源 ; 
2. 执行 modulel.js 3 

3， 递 蝶 执行 内 联 模块 导入 的 资源 ; 

4. 执行 内 联 模 块 ; 

5. 递归 执行 module2.js 导入 的 资源 ; 


6. 执行 module2.js ° 


注意 内 联 模 块 除 了 不 必 先 下 载 代 码 之 外 ， 与 其 他 两 个 模块 的 行为 一 致 ， 加 载 import 的 资源 
与 执行 模块 的 次 序 都 是 完全 一 样 的 。 


<script type="module"> 上 的 defer 属性 总 是 会 被 忽略 ， 因 为 它 已 经 应 用 了 该 属性 。 
Web 浏览 器 中 的 异步 模块 加 载 


你 或 许 已 熟悉 了 <script> 元 素 上 的 async 属性 。 当 配合 脚本 使 用 时 ， async 会 导致 脚本 
文件 在 下 载 并 解析 完毕 后 就 立即 执行 。 但 带 有 async 的 脚本 在 文档 中 的 顺序 却 并 不 会 影响 脚 
本 执行 的 次 序 ， 脚 本 总 是 会 在 下 载 完成 后 就 立即 执行 ， 而 无 须 等 待 包含 它 的 文档 解析 完毕 。 


async 属性 也 同样 能 被 应 用 到 模块 上 。 在 <script type="module"> 上 使 用 async 会 导致 模 
块 的 执行 行为 与 脚本 相似 。 唯 一 区 别 是 模块 中 所 有 import 导入 的 资源 会 在 模块 自身 被 执行 
前 先 下 载 。 这 保证 了 模块 中 所 有 需要 的 资源 会 在 模块 执行 前 被 下 载 ， 你 只 是 不 能 保证 模块 何 
时 会 执行 。 研 究 以 下 代码 : 


<!-- no guarantee which one of these will execute first --> 
<script type="module" async src="module1.js"></script> 
<script type="module" async src="module2.js"></script> 


此 例 中 两 个 模块 文件 被 异步 加 载 了 。 仅 查看 代码 是 不 可 能 判断 出 哪个 模块 会 被 先 执行 。 若 
module1.js 首先 结束 下 载 (包括 它 的 所 有 导入 资源 ) ， 那 么 它 就 会 首先 执行 。 而 对 于 
module2.js 来 说 也 是 一 样 。 


将 模块 作为 Worker 加 载 


诸如 Web Worker 5 Service Worker 之 类 的 worker ， 会 在 网 页 上 下 文 外 部 执行 JS 代码 。 创 
建 一 个 新 的 worker 调用 ， 也 就 会 创建 worker (或 其 他 worker 类 ) 的 一 个 实例 ， 并 会 向 其 
传 入 JS 文件 的 位 置 。 其 默认 的 加 载 机 制 是 将 文件 当 作 脚本 来 下 载 ， 例 如 : 


// 用 脚本 方式 加 载 script.js 
let worker = new Worker("Script.js"); 


为 了 支持 模块 加 载 ， HTML 标准 的 开发 者 为 这 些 worker 构造 器 添加 了 第 二 个 参数 ， 此 参数 是 
一 个 有 type 属性 的 对 象 ， 该 属性 的 默认 值 是 SC ° 你 也 可 以 将 type 设置 为 
"module" 以 便 加 载 模块 文件 : 


// 用 模块 方式 加 载 module.js 


let worker = new Worker("module.js", { type: "module" }); 


此 例 通 过 传递 type 属性 值 为 "module" 的 第 二 个 参数 ， 将 module.js 作为 模块 而 不 是 脚本 
进行 了 加 载 ( type 属性 也 就 是 模拟 了 <script> 标 签 在 模块 与 脚本 之 间 的 type 区 别 ) 。 
这 第 二 个 参数 在 浏览 器 中 的 所 有 的 worker 类 型 中 都 得 到 了 支持 。 


worker 模块 通常 与 worker 脚本 一 致 ， 但 存在 两 点 例外 。 首 先 ，worker 脚本 被 限制 只 能 从 同 
源 的 网 页 进行 加 载 ， 而 worker 模块 可 以 不 受 此 限制 。 尽 管 worker 模块 具有 相同 的 默认 限 
制 ， 但 当 响 应 头 中 包含 恰当 的 跨 域 资 源 共 享 ( Cross-Origin Resource Sharing > CORS ) 
时 ， 就 允许 跨 域 加 载 文件 。 其 次 ，worker 脚本 可 以 使 用 self.importScripts() 方法 来 将 额 
外 脚本 引入 worker ， 而 worker 模块 上 的 self.importScripts() 却 总 会 失败 ， 因 为 应 当 换 用 


import ° 


浏览 器 模块 说 明 符 方案 


RE BAW PA I RA 都 使 用 了 相 对 的 模块 说 明 符 ， 例 如 "./example.js" ° a 1 览 器 要 求 模 块 说 
明 符 应 当 为 下 列 格 式 之 一 : 


eo 以 / 为 起 始 ， 表示 从 根 目录 开始 解析 ; 

e 以 ,/ 为 起 始 ， 表 示 从 当前 目录 开始 解析 ; 
e 以 ../ 为 起 始 ， 表 示 从 父 级 目录 开始 解析 ; 
。 URL 格式 。 


例如 ， 假 设 你 拥有 一 个 位 于 https://www.example.com/modules/module.js 的 模块 文件 ， 包 含 了 
以 下 代码 : 


// 从 https://www.example.com/modules/example1.js 导入 
import { first } from "./example1.js"; 


// 从 from https://www.example.com/example2.js +A 
import { second } from "../example2.js"; 


// 从 from https://www.example.com/example3.js +A 
import { third } from "/example3.js"; 


// 从 from https://www2.example.com/example4.js +A 
import { fourth } from "https://www2.example.com/example4.js"; 


此 例 中 每 一 个 模块 说 明 符 在 浏览 器 中 使 用 时 都 是 有 效 的 ， 包 括 最 后 一 行 的 完整 URL (你 无 须 
确保 ww2.example.com 已 经 正确 配置 了 它 的 CORS 响应 ass 载 ， 这 会 影响 是 否 能 
跨 域 加 载 ， 却 不 会 影响 语法 的 有 效 性 ) 。 只 有 这 些 才 是 浏览 器 WA 能 使 用 的 模块 说 明 符 
格式 ， 不 过 未 完成 的 模块 加 载 器 规范 将 会 提供 对 其 他 格式 的 支持 。 rae 些 看 似 正 常 的 

模块 说 明 符 实际 上 在 浏览 器 中 是 无 效 的 ， ee 


UY FoR. EATS IS oll BY oll Bee 
import { first } from "example.js"; 


Hil FERC SEL YP alk BY gad) yee 
import { second } from "example/index.js"; 


此 处 的 模块 说 明 符 都 不 能 被 浏览 器 加 载 。 这 两 个 模块 说 明 符 都 缺失 了 正确 的 起 始 字符 ， 使 用 
的 是 无 效 格式 ， 尽 管 在 <script> 标签 中 作为 sro 来 使 用 是 有 效 的 。 这 是 在 <script> 与 
import 之 间 有 意 制 造 的 行为 差异 。 


ES6 为 JS 语言 添加 了 模块 ， 作 为 打包 与 封装 功能 的 方式 。 模 块 的 行为 异 于 脚本 ， 它 们 不 会 用 


自身 顶级 作用 域 的 变量 、 pene ee 而 模块 的 this 442A undefined ° A 
了 实现 这 些 行为 ， 模 块 在 被 加 载 时 使 用 了 一 种 不 同 的 方式 。 


你 必须 将 模块 中 需要 向 外 提供 的 任何 功能 都 导出 ， 变 量 、 函 数 与 类 都 可 以 ， 并 且 每 个 模块 允 
许 存在 一 个 默认 导出 。 在 导出 之 后 ， 另 一 个 模块 就 能 导入 该 模块 所 导出 的 一 个 或 多 个 名 称 

了 。 这 些 导 入 的 名 称 就 像 是 被 const 所 定义 的 ， 会 被 当 作 块 级 绑 定 ， 并 且 不 允 在 同一 模块 内 
重复 声明 。 


如 果 模 块 只 是 要 操纵 全 局 作用 域 ， 那 么 无 须 导 出 任何 值 。 你 实际 上 可 以 导入 这 样 一 个 模块 ， 
而 不 会 在 当前 模块 作用 域 中 引入 任何 绑 定 。 


由 于 模块 必须 用 与 脚本 不 同 的 方式 运行 ， 浏 览 器 就 引入 了 <script type="module"> ? 以 表示 
资源 文件 或 内 联 代码 需要 作为 模块 来 执行 。 使 用 <script pr sas 的 模块 文件 会 
默认 应 用 gefer 属性 。 一 旦 包含 模块 的 页 面 文档 完全 被 解析 ， 模 块 就 会 按照 它们 在 文档 中 的 
出 现 顺 序 依 次 执行 


附录 A : 较 小 的 改进 


除了 本 书 已 涵盖 的 主要 变化 之 外 ，ES6 还 做 出 了 一 些 虽 小 但 仍然 有 助 于 改进 JS 的 变更 ， 包 
括 : 使 整 型 更 易 用 、 新 增 计 算 方 法 、 对 Unicode 标识 符 的 细微 调整 ， 以 及 规范 化 _proto 
属性 。 我 会 在 本 附录 中 描述 所 有 这 些 内 容 。 


o 处 理 整 型 


e 新 的 数学 方法 
e Unicode 标识 符 
© 规范 化 的 _proto 属性 


处 理 整 型 


JS 使 用 IEEE 754 编码 系统 来 表示 整 型 与 浮 点 型 ， 多 年 以 来 这 引发 了 很 多 混乱 。 虽 然 这 门 语 
言 仇 费 苦心 地 确保 开发 者 不 需要 关心 数值 的 编码 细节 ， 但 问题 仍然 会 时 不 时 涌现 出 来 。ES6 
力图 解 决 这 方面 的 问题 ， 让 整 型 变 得 更 易 识 别 、 更 易 处 理 。 


首先 ， ES6 新 增 了 Number.isInteger() 方法 ， 用 于 判断 一 个 值 是 否 能 在 JS 中 表示 整 型 。 虽 
然 JS 使 用 了 IEEE 754 来 同时 表示 浮 点 型 与 整 型 这 两 种 数值 ， 但 它们 的 存储 方式 仍 有 差异 。 
Number .isInteger() 方法 利用 了 这 个 差异 ， 当 使 用 一 个 值 来 调用 此 方法 时 ，JS 引擎 会 查看 

该 值 的 底层 表示 以 判断 它 是 不 是 一 个 整 型 。 这 意味 着 看 起 来 像 浮 点 型 的 数值 实际 上 可 能 被 存 

储 为 整 型 ， 此 时 Number.isInteger() 便 会 返回 true 。 例 如 : 


console.1og(Number .isInteger(25)); // true 
console.log(Number.isInteger(25.0)); // true 
console. log(Number.isInteger(25.1)); // false 


在 此 代码 中 ， 向 Number.isInteger() 传 入 25 和 25.0 都 会 返回 true ， 尽 管 后 者 看 起 来 
是 浮 点 型 。 在 JS 中 ， 单 纯 添加 一 个 小 数 点 并 不 会 让 数字 自动 变 为 浮 点 型 。 由 于 25.0 实际 
上 就 是 25 ， 它 就 被 存储 为 整 型 ; 而 数值 25.1 则 会 被 存储 为 浮 点 型 ， 因 为 它 拥有 小 数 部 


分 。 


安全 的 整 弄 


IEEE 754 只 能 精确 表示 -2” 与 2 ”之 癌 的 整 型 数 ， 在 该 "安全 "范围 之 外 ， 儿 个 不 同 的 数值 
就 有 可 能 对 应 同一 个 二 进 制 表示 。 这 意味 着 JS 只 能 在 IEEE 754 的 精确 范围 内 保证 对 整 型 数 
的 安全 表示 。 例 如 ， 研 究 以 下 例子 : 


console.log(Math.pow(2, 53)); // 9007199254740992 
console.log(Math.pow(2, 53) + 1); // 9007199254740992 


此 例 并 不 包含 拼写 错误 ， 然 而 两 个 不 同 的 数值 却 被 表示 成 了 同一 个 JS 整 型 数 。 当 数值 超出 安 
全 范围 越 远 ， 此 效果 就 越 加 明显 。 


ES6 引进 了 Number.issafeInteger() 以 便 更 好 识别 该 语言 所 能 精确 表示 的 整 型 ; 同时 新 增 的 
还 有 Number.MAX_SAFE_INTEGER 与 Number.MIN_SAFE_INTEGER 属性 ， 分 别 用 于 表示 整 型 数 的 上 
下 边界 。 Number.isSafeInteger() 方法 能 确认 一 个 值 是 整 型 、 并 且 它 落 在 安全 范围 之 内 ， 正 
如 此 例 : 


var inside = Number.MAX_SAFE_INTEGER, 
outside = inside + i; 


console.log(Number.isInteger (inside) ); MI TE 
console.log(Number.isSafeInteger(inside)); // true 
console.log(Number.isInteger (outside) ); if eque 
console.log(Number.isSafeInteger (outside) ); // false 


数值 inside 是 最 大 的 安全 整 型 数 ， 因 此 用 它 去 调用 number. isInteger() 与 
Number.isSafeInteger() 都 会 返回 true 。 数 值 outside 则 是 第 一 个 可 疑 的 整 型 值 ， 尽 管 它 
依然 是 个 整 型 数 ， 但 仍 被 认为 是 不 安全 的 。 


多 数 情况 下 ， 你 只 想 用 安全 的 整 型 数 在 JS 中 去 进行 整 型 运算 或 比较 ， 因 此 使 用 
Number .isSafeInteger() 作为 输入 验证 的 一 部 分 便 是 个 好 主 ; 


eo 
ee 


新 的 数学 方法 


ES6 的 游戏 与 图 形 的 新 重点 引导 它 将 类 型 化 数组 ( typed array ) 引入 了 JS ， 同 时 也 让 它 意 
识 到 JS 引 警 应 当 更 有 效率 地 进行 许多 数学 计算 。 但 诸如 asm.js (工作 在 JS 的 一 个 子 集 上 以 
提高 效率 ) 之 类 的 优化 策略 ， 都 需要 更 多 的 信息 以 便 尽 可 能 快 地 进行 计算 。 例 如 ， 知 道 数值 
是 被 作为 32 位 整 型 还 是 64 位 浮 点 型 来 处 理 ， 对 基于 硬件 的 操作 来 说 是 非常 重要 的 ， 而 这 要 
比 基 于 软件 的 操作 快 得 多 。 


因此 ，ES6 给 math 对 象 新 增 了 几 个 方法 来 提高 通用 数学 计算 的 速度 ， 而 提高 通用 计算 速度 
也 能 让 图 形 程序 之 类 的 需要 进行 密集 计算 的 应 用 提高 总 体 速度 。 下 列 就 是 这 些 新 方法 : 


e Math.acosh(x) 返回 X 的 反 双 曲 余弦 值 ; 
e Math.asinh(x) :返回 Xx 的 反 双 曲 正弦 和 值 ; 


e Math.atanh(x) :返回 X 的 反 双 曲 正切 值 ; 

e Math.cbrt(x) :返回 X 的 立方 根 ; 

e Math.clz32(x) :返回 X 的 32 位 整 型 二 进 制 表达 形式 起 始 处 0 的 个 数 ; 
e Math.cosh(x) :返回 X 的 双 曲 余弦 值 ; 

e Math.expmi(x) : 返回 ex -1 的 值 ; 

e Math.fround(x) :返回 最 接近 X 的 单 精度 浮 点 数 ; 

e Math.hypot(...values) :返回 参数 平方 和 的 平方 根 ; 

e Math.imul(x, y) na 32 位 乘法 运算 结果 ; 


e Math.logip(x) :返回 1+X 的 自然 对 数 ; 
e Math.logio(x) :返回 X 的 常用 对 数 ( 即 以 10 为 底 ) 3 
e Math.log2(x) :返回 X 的 二 进 制 对 数 〈 即 以 2 为 底 ) ; 


e Math.sign(x) : X 为 负数 时 返回 -1 ，+0 与 -0 返回 0， 正 数 则 返回 1 ; 
e Math.sinh(x) :返回 Xx 的 双 曲 正弦 和 值 ; 
e Math.tanh(x) :返回 X 的 双 曲 正切 值 
e Math.trunc(x) : 移 除 浮 点 型 数值 小 数 点 后 的 数字 ， 以 返回 一 个 整 型 


=~ 
Er 
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解释 每 个 新 方法 以 及 它 的 细节 已 经 超出 了 本 书 的 范围 。 不 过 若 你 的 应 用 需要 合理 地 进行 通用 
计算 ， 在 自行 实现 之 前 请 先 检查 是 否 已 有 对 应 的 math 新 方法 。 
Unicode 标识 符 


ESG 提供 了 上 比 之 前 版 本 更 好 的 Unicode 支持 ， 同 时 也 修改 了 能 被 用 于 标识 符 的 字符 范围 。 在 
ES5 中 已 经 能 在 标识 符 里 使 用 Unicode 转 义 序列 ， 例 如 : 


// 在 ESS 与 ES6 中 都 有 效 
var \u0061 = "abc"; 


console.log(\u0061); Wilf VEN NE" 
Sf Fert: 
console.log(a); /iabes 


在 此 例 的 var 语句 之 后 ， 你 用 uoo 或 a 都 能 访问 这 个 变量 。 在 ES6 中 ， 你 还 能 在 标 
识 符 里 使 用 Unicode 码 点 转 义 序列 ， 就 像 这 样 : 


// 在 ES5 与 ES6 中 都 有 效 
var \u{61} = "abc"; 


console. log(\u{61}); // "abc" 


He SPE E 
console.log(a); adey 


本 例 只 是 将 \ue661 替换 为 它 的 码 点 等 价 形式 ， 这 么 做 的 效果 实际 上 与 上 个 例子 完全 相同 。 


另外 ，ES6 还 将 Unicode 标准 附录 31 中 的 字符 正式 指定 为 有 效 的 标识 符 〈 该 附录 详 见 
Unicode Standard Annex #31: Unicode Identifier and Pattern Syntax) ， 其 规则 如 下 : 


1. 第 一 个 字符 必须 是 $ > _ 9 AABT iw start 核心 衍生 属性 的 Unicode 符号 ; 
2. 之 后 的 字符 必须 为 $> _ > Nuzooc (RETF) 、 wzo (RAF) A 


任何 属于 ID_Continue 核心 衍生 属性 的 Unicode 符号 


ID Start 与 ID Continue 核心 衍生 属性 由 Unicode 标识 符 与 模式 语法 ( 即 上 述 附 录 ) 定 


义 ， 提 供 了 一 种 方法 以 识别 能 被 用 于 标识 符 (如 变量 与 域名 ) 的 合适 符号 。 该 规范 并 未 针对 
JS ° 


规范 化 的 _proto_ At 


在 ESS 规范 完成 之 前 ， 几 个 JS 引擎 就 已 经 实现 了 一 个 称 为 _proto 的 自 定义 属性 ， 能 
它 来 获取 并 设置 [[Prototype] ] 属性 。 实 际 上 ， proto_ 就 是 Object.getPrototypeOf ( ) 
与 Object.setPrototypeof() 方法 的 早期 先驱 期 望 所 有 的 JS 引 aE Ap AS 除 这 个 属性 是 不 现实 
的 ， 因 为 有 些 流 行 的 JS 代码 库 已 经 利用 了 该 属性 ， 因 此 ES6 也 将 该 属性 的 行为 标准 化 了 ， 
但 在 ECMA-262 附录 B 中 该 规范 也 附带 了 以 下 警告 : 
这 些 特性 并 不 被 认为 是 ES 语言 的 核心 部 分 ， 程 序 员 在 书写 新 的 ES 代码 时 ， 不 应 使 用 
它 、 或 假定 这 些 特 性 存在 。 ES 的 实现 方案 并 不 鼓励 实现 这 些 特 性 ， 除 非 该 实现 已 是 
web 浏览 器 的 一 部 分 、 或 者 被 用 于 在 浏览 器 中 运行 遗留 代码 。 
ES 规范 更 推荐 使 用 object.getPrototypeof() 与 Object.setPrototypeof() 方法 ， 因 为 
proto 具有 如 下 特征 : 
1. _proto 在 对 象 字面 量 中 只 能 指定 一 次 ， 指 定 多 个 _ proto 将 会 抛 出 错误 。 这 也 是 
对 象 字 面 量 属性 中 唯一 受 此 限制 的 属性 。 
2 对象 字面 量 中 可 计算 形式 的 ["_proto _"] 表现 得 就 像 是 常规 属性 ， 并 不 会 设置 或 返回 
当前 对 象 的 原型 。 对 于 字面 量 属性 来 说 ， 可 计算 形式 与 非 计 算 形 式 一 般 是 等 价 的 ， 只 有 
proto ”例外 。 


译注 : 这 代表 以 下 两 种 写法 并 不 等 价 





let a = { 
["__proto__"]: Number 
J; 
以 及 
let b = { 
__proto__: Number 
J; 


后 者 可 以 将 b 的 原型 设置 为 Number ， 而 前 者 对 a 的 原型 没有 造成 任何 影响 。 


在 上 述 代 码 执行 后 ， 再 执行 b.isinteger(15.2) 会 返回 false ， 而 执行 
a.isInteger(15.2) 则 会 报错 ， 因 为 Number 并 没有 正确 绑 定 到 a 的 原型 上 ， 只 是 作 
为 一 个 普通 属性 存在 。 


你 应 当 规避 _proto ”属性 ， 不 过 规范 文档 定义 它 的 方式 却 很 有 意思 。 在 ES6 引擎 中 ， 
object.prototype. proto 被 定义 为 一 个 访问 器 属性 ， 其 get 方法 会 调用 
Object.getPrototypeof() ， 而 set 方法 则 会 调用 object.setPrototypeof() 。 这 样 在 使 用 
_proto ”与 使 用 object.getPrototypeof() / Object.setPrototypeof() ZA MILF AA A 
正 区 别 ， 唯 一 例外 是 _ proto 能 在 对 象 字 面 量 中 直接 使 用 ， 用 于 设置 对 象 的 原型 。 以 下 是 
使 用 它 的 范例 : 


let person = { 
getGreeting() { 
return "Hello"; 


} 
}; 
let dog = { 
getGreeting() { 
return "Woof"; 
} 
}; 


// 原型 设 为 person 
let friend = { 


__proto__: person 
}; 
console.log(friend.getGreeting()); Mahe llog 
console.log(Object.getPrototypeOf(friend) === person); // true 
console.log(friend.__proto__ === person); Aue 


// 将 prototype 改 为 dog 


friend.__proto__ = dog; 

console.log(friend.getGreeting()); // "Woof" 
console.log(friend.__proto__ === dog); Lene 
console.log(Object.getPrototypeOf(friend) === dog); // true 


此 例 未 调用 Object.create() 来 创建 friend 对 象 ， 而 是 创建 了 一 个 标准 的 对 象 字 面 量 ， 并 
将 一 个 值 ( person ) RAT _proto 属性 。 而 另 一 方面 ， 当 使 用 object.create() 方式 
时 ， 你 需要 为 对 象 的 任意 附加 属性 指定 完整 的 属性 描述 符 。 


附录 B : 理解 ES7(ES2016) 


ES6 的 开发 消耗 了 大 约 四 年 时 间 ， 此 后 TC-39 小 组 决定 不 再 接受 如 此 长 的 开发 过 程 ， 他 们 改 
用 年 度 周期 来 发 布 语言 的 新 特性 ， 以 确保 语言 特性 能 够 尽快 发 展 。 


更 频繁 的 发 布 意味 着 每 个 新 的 ES 版 本 拥有 的 新 特性 会 比 ES6 少 得 多 。 为 了 标示 这 种 变化 ， 
新 规范 的 版 本 号 不 再 重点 描述 版 本 数字 ， 而 改 为 指明 规范 发 布 的 年 份 。 因 此 ES6 也 被 称 为 
ES2015 ， 而 ES7 也 正式 被 称 为 ES2016 © TC-39 小 组 预计 将 来 所 有 的 ES 版 本 都 会 使 用 这 
个 以 年 份 为 基础 的 命名 系统 。 


ES2016 在 2016 年 3 月 定稿 ， 并 且 只 向 语言 添加 了 三 项 内 容 : 一 个 新 的 数学 运算 符 、 一 个 新 
的 数组 方法 ， 以 及 一 种 新 的 语法 错误 。 这 些 全 都 包含 在 本 附录 中 。 
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e PARR 
o 算 顺 序 
o A 数 的 限制 

e Array.prototype.includes() 方法 


加 


o 如 何 使 用 Array.prototype.includes() 
o 值 比较 
© 函数 作用 域 严格 模式 的 改动 
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ES2016 对 JS 语法 引入 的 唯一 改进 就 是 知 运 算 符 ( exponentiation operator ) ， 此 数学 运 
算 能 将 指数 运用 到 底数 上 。 虽然 已 经 有 math. pow() BRUT RE? At JS 也 是 在 此 

面 只 能 调用 方法 而 不 能 使 用 运算 符 的 少数 语言 之 一 ， 并 且 一 些 开 发 者 认为 运算 符 可 读 性 更 
强 、 更 多 于 检查 。 


RIERA ARASES ( ** ) ， 其 左 侧 是 底数 ， 右 侧 则 是 指数 ， 例 如 


let result = 5 "7 2; 


console.log(result); ie Ps 
console.log(result === Math.pow(5, 2)); // true 


此 例 计 算 了 52 > SERA 25 。 你 也 可 以 使 用 Math.pow() 来 获取 相同 结果 。 


竺 运算 符 的 优先 级 在 JS 的 二 元 运算 符 中 是 最 高 的 (但 低 于 一 元 运算 符 ) 。 这 意味 着 在 复合 运 
算 中 它 会 被 优先 运用 ， 正 如 下 例 : 


let resulti =2 <- 5 n2; 
console.log(result); // 50 


52 的 计算 会 首先 发 生 ， 其 结果 值 随后 会 与 2 相 乘 来 产生 最 终 的 结果 : 50 。 


操作 数 的 限制 


与 其 他 运算 符 不 同 ， 需 运算 符 有 一 个 稍 显 独特 的 限制 : 运 工 符 左 侧 不 能 是 除了 ++ 或 -- 之 
外 的 任意 一 元 表达 式 ， 人 例如， 下面 的 语法 是 无 效 的 : 


// 语法 错误 
let result = -5 2: 2; 


本 例 中 的 -5 是 个 语法 错误 ， 因 为 运算 的 顺序 是 有 二 义 性 的 。 - 应 当 运 用 到 5 上 面 ， 还 
是 运用 到 5 ** 2 的 结果 上 面 呢 ? 禁止 左 侧 的 一 元 表达 式 消除 了 这 个 歧义 。 为 了 清晰 地 说 明 
意图 ， 需 要 给 -5 或 5 ** 2 添加 圆 括号 ， 如 下 所 示 : 


// 没 问题 

let resulti = -(5 ** 2); // #4 -25 
// 也 没 问题 

let result2 = (-5) ** 2; Up apap PS 


BUA REPRANARIET ? MA - 会 作用 在 这 整个 表达 式 上 ; 而 若 你 为 -5 ARIE 
岂 清 楚 表 示 想 要 获取 -5 的 平方 。 

HERES HY AM RIA AURA ++ 或 -- 时 ， 就 无 需 使 用 括号 ， 因 为 这 两 个 运算 符 在 操 
作 数 上 的 行为 都 被 清晰 定义 了 : ++ 或 -- 作为 ERT E E 
数 ， 而 作为 后 级 则 会 在 整个 表达 式 计 算 完 毕 后 才 修 改 操 作 数 。 在 千 运 算 符 左 侧 的 这 两 种 用 法 
都 是 安全 的 ， 正 如 下 面 代码 所 示 : 


let num1 = 2, 


num2 = 2; 
console.log(++numi ** 2); // 9 
console.log(num1); LAS 
console.log(num2-- ** 2); // 4 
console.log(num2); Hf “al 


此 例 中 的 numa Ze ARIEL IK A ZA ORA > AL num SEAZ > HAFBHHH 
果 为 9。 而 对 于 nm 来 说 ， 在 参与 千 运 算 时 它 的 值 仍 然 保持 为 2， 在 运算 之 后 才 被 递减 到 
1° 


Array.prototype.includes() 方法 


你 或 许 会 记得 ES6 新 增 了 String.prototype.includes() 用 于 检查 某 个 子 字符 串 是 否 存 在 于 
指定 字符 串 中 。 ES6 起 初 也 想 引 入 一 个 array.prototype.includes() 方法 ， 让 使 用 类 似 方式 
处 理 字符 串 与 数组 的 倾向 能 得 以 保持 。 但 此 方法 的 规范 未 能 赶 上 ES6 的 最 后 期 限 ， 于 是 最 终 
它 就 进入 了 ES2016 。 


如 何 使 用 Array.prototype.includes() 

Array.prototype.includes() 方法 接受 两 个 参数 : 需要 搜索 的 值 3 可 选 的 搜索 起 始 位 置 索引 2 
当 提 供 了 第 二 个 参数 时 ， includes() 会 从 该 位 置 开 始 尝试 匹配 (默认 的 起 始 位 置 为 0 ) 。 
若 在 数组 中 找到 了 该 值 ， 返 回 true ; 否则 返回 false 。 例 如 : 


let values = [1, 2, 3]; 


console.log(values.includes(1)); EU 
console.log(values.includes(0)); // false 
// 从 索引 2 开始 搜索 

console.log(values.includes(1, 2)); // false 


此 处 使 用 1 去 调用 PAESE ES 返回 了 true ， 而 使 用 6 MARA false > AA 
6 并 不 在 此 数组 中 。 当 使 用 了 第 二 个 参数 让 搜索 从 索引 位 置 2 〈 该 位 置 的 元 素 值 是 3 ) A 
始 进行 时 ， values.includes() 方法 返回 了 false ， 因 为 数值 1 并 不 存在 于 位 置 2 与 数组 
末端 之 间 。 


值 比 较 


includes() 方法 使 用 === 运算 符 来 进行 值 比 较 ， 仅 有 一 个 例外 : nan 被 认为 与 自身 相 
等 2 尽管 NaN === NaN 的 计算 结果 为 false 。 这 与 indexOf () 方法 的 行为 不 同 ， 后 者 在 比 
较 时 严格 使 用 了 === 运算 符 。 为 了 明白 其 中 的 差异 ， 研 究 如 下 代码 : 


let values = [1, NaN, 2]; 


console.log(values.indexOf (NaN) ); // -1 
console.log(values.includes(NaN)); // true 


values.indexof() 方法 为 NaN 返回 了 -1 > RS NaN 实际 上 被 包含 在 values 数组 中 。 
另 一 方面 ， 由 于 使 用 不 同 的 比较 运算 符 ， values.includes() 方法 则 为 nan 返回 了 true 


o 


若 只 想 检 查 某 个 值 是 否 存在 于 数组 中 ， 而 不 想 知 道 它 的 位 置 ， 我 推荐 使 用 includes() 
， 这 是 由 于 includes() 与 indexof() 方法 对 于 nan 的 处 理 不 同 。 而 若 确 实 想 知道 某 
个 值 在 数组 中 的 位 置 ， 那 么 就 必须 使 用 indexof() 方法 。 


在 实现 中 的 另 一 个 怪异 点 是 +0 和 -0 被 认为 是 相等 的 。 在 这 个 方面 ， indexof() 与 
includes() 行为 一 致 : 


let values = [1, +0, 2]; 


console.log(values.indexOf(-0)); Hap A 
console.log(values.includes(-0)); // true 


此 处 的 indexof() 4 includes() 都 在 传 入 -6 的 时 候 找到 了 +0 ， 因 为 它们 认为 这 两 个 
值 是 相等 的 。 注意 这 文 与 Object.is() 方法 的 行为 有 差异 ， 后 者 认为 +0 与 -0 是 不 同 的 
值 。 


兄 数 作用 域 严格 模式 的 改动 


当 严 格 模式 在 ES5 中 被 引入 时 ，JS 语言 要 比 后 来 的 ES6 简单 得 多 。 尽 管 如 此 ，ES6 仍然 

允许 你 使 用 "use strict" 指令 来 指定 严格 模式 ， 可 以 在 全 局 作用 域 上 ， 让 所 有 代码 运行 在 严 
格 模式 下 ; 或 用 在 函数 作用 域内 ， 只 有 该 函数 会 运行 在 严格 模式 下 。 后 一 种 方式 最 终 在 ESC 

中 成 为 了 一 个 问题 ， 这 是 由 于 参数 可 以 用 更 加 复杂 的 方式 来 定义 ， 特 别 是 在 带 有 解构 或 默认 

值 的 情况 下 。 为 了 理解 这 个 问题 ， 研 究 如 下 代码 : 


function doSomething(first = this) { 
"use strict"; 


return first; 


此 处 的 具名 参数 first 被 赋予 了 一 个 默认 值 this ， 而 你 预期 first 的 值 会 是 什么 ? ESE 
规范 指示 JS 引擎 此 时 要 用 严格 模式 来 处 理 参数 ， 因 此 this 的 值 应 当 等 于 undefined 。 然 
mo 3 SRA SB T “use strict" 时 ， 要 将 参数 也 限制 在 严格 模式 中 有 相当 的 困难 ， 因 

为 参数 默认 值 也 可 能 是 个 函数 。 这 种 困难 情况 导致 大 部 分 JS 引擎 都 没有 实现 这 个 特性 (因此 
this 的 值 可 能 等 于 全 局 对 象 ) © 


由 于 该 实现 的 难度 ，ES2016 规定 如 果 有 函数 的 参数 被 进行 解构 或 是 拥有 默认 值 ， 则 在 该 函数 

内 部 使 用 "use strict" 指令 将 是 违法 的 。 当 函数 体内 出 现 了 "use strict" 时 ， 该 函数 只 允 
许 使 用 简单 参数 列表 (也 就 是 所 包含 的 参数 没有 进行 解构 ， 也 没有 默认 值 ) 。 下 面 有 一 些 示 

例 : 


// 没有 问题 ， 使 用 了 简单 参数 列表 
function okay(first, second) { 
"use strict"; 


return first; 

// 语法 错误 

function notOkayi(first, second=first) { 
"use strict"; 
return first; 

// 语法 错误 

function notOkay2({ first, second }) { 


"use strict"; 


return first; 


你 依旧 可 以 在 只 有 简单 参数 列表 的 函数 内 使 用 "use strict" ， 这 也 是 okay() Sy Hk te FA HH 
正常 工作 的 原 (就 像 在 ES5 中 一 样 ) ° notokay1() A Ih) 会 有 语法 错误 ， 因 为 它 使 用 了 
参数 的 默认 值 。 类 似 的 ， notokay2() 函数 同样 有 语法 错误 ， 因 为 它 使 用 了 解构 参数 。 


总 的 来 说 ， 这 项 改动 既 解 决 了 JS 开发 者 的 困惑 ， 又 消除 了 JS 引擎 的 一 个 实现 难题 。 
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2017-09-01 


第 十 一 章 Promise 与 异步 编程 


使 用 Promise.reject() 


若 你 传递 一 个 Promise 给 promise.resolve() 或 Promise.reject() 方法 ， 该 Promise 
会 不 作 修改 原样 返回 


修改 为 : 
若 你 传递 一 个 Promise 给 promise.resolve() ， 该 Promise 会 不 作 修改 原样 返 


并 删除 以 下 译注 : 
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修改 记录 


译注 : 经 过 测试 ， 在 几 大 浏览 器 中 都 存在 与 上 一 句 话 不 符 的 情况 。 


1. 若 传 入 的 Promise 为 进行 态 ， 则 promise.resolve() 调用 会 将 该 Promise 原样 返 
回 。 此 后 ， 若 决议 原 Promise > Æ then() 中 可 以 接收 到 原 例 中 的 参数 42 ; 而 若 
拒绝 原 Promise ， 则 在 catch() 中 可 以 接收 到 参数 42 。 但 promise.reject() 
调用 则 会 对 原先 的 Promise 重新 进行 包装 ， 对 其 使 用 catch() 可 以 捕 提 到 错误 ， 
处 理 函 数 中 的 valu 参数 不 会 是 数值 42 ， 而 是 原先 处 于 进行 态 的 Promise ° 

2. 4A Promise 为 完成 态 ， 则 promise.resolve() 调用 会 将 该 Promise 原样 返 
回 ， 在 then() 中 可 以 接收 到 原 例 中 的 参数 42 。 但 Promise.reject() 调用 则 会 
对 原先 的 Promise 重新 进行 包装 ， 对 其 使 用 catch() 可 以 捕捉 到 错误 ， 处 理 函 数 
中 的 value 参数 不 会 是 数值 42 ， 而 是 原先 处 于 完成 态 的 Promise 。 

3， 若 传 入 的 Promise 为 拒绝 态 ， 则 promise.reject() 调用 会 将 该 Promise 原样 返 
回 ， 在 cath 中 可 以 接收 到 参数 42 。 但 promise.resolve() 调用 则 会 对 原先 
的 Promise 重新 进行 包装 ， 对 其 使 用 then 可 以 进行 完成 处 理 ， 处 理 函 数 中 的 
value 参数 不 是 42 ， 而 是 原先 处 于 拒绝 态 的 Promise 。 也 就 是 说 此 时 的 情况 与 
上 一 种 情况 相反 。 





总 结 : 对 进行 态 或 完成 态 的 Promise 使 用 Promise.resolve() 没 问 题 ， 会 返回 原 
Promise ; 对 拒绝 态 的 Promise 使 用 promise.reject() 也 没 问 题 。 而 除 此 之 外 的 情况 全 
都 会 在 原 Promise 上 包装 出 一 个 新 的 Promise 。 


在 目前 的 浏览 器 中 测试 结果 为 : promise.resolve() 会 将 传 入 的 Promise 类 型 的 参数 直接 返 
回 ， 无 论 该 Promise 处 于 何 种 状态 。 而 promise.resolve() 则 会 对 传 入 的 任意 对 象 参 数 进行 
Promise 包装 ， 返 回 一 个 新 的 Promise 对 象 ， 无 论 传 入 参数 是 否 为 Promise 类 型 ， 也 不 论 
参数 是 否 为 已 处 于 拒绝 态 的 Promise 。 这 样 的 行为 也 符合 了 ES6 的 规范 ， 其 中 
Promise.resolve() 会 根据 对 象 参 数 的 constructor 属性 来 判断 它 是 否 为 一 个 Promise 对 
Bo 


上 述 附 注 已 不 符合 实际 情况 ， 因 此 了 予以 删除 。 原 文 唯一 问题 是 对 于 promise.reject() 方法 的 
使 用 。 
异步 任务 运行 
删除 以 下 译注 : 
译注 : 此 处 的 
Promise.resolve() 在 被 传 入 任意 Promise 时 只 会 直接 将 其 传递 回来 
表述 不 够 准确 ， 详 情 参 见 前 面 的 译注 。 


理由 同上 。 
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2017-08-20 


总 体 修 改 说 明 


对 全 部 译文 重新 进行 了 检查 ， 修 改 了 700 多 处 。 不 过 绝 大 部 分 仅仅 是 修改 了 表述 方式 ， 包 括 
调整 语序 、 修 改 关联 词 、 减 少 括号 的 使 用 等 。 此 外 : 
1. 原文 中 对 其 他 章节 的 引用 ， 许 多 地 方 提 到 的 章节 序号 都 有 错 ， 都 进行 了 修正 ， 不 一 一 列 
出 。 
2. 根据 正式 中 文 版 图 书 ， 对 少数 名 词 的 翻译 进行 了 调整 ， 包 括 : 
o 将 “ 需 计 算 属 性 名 ”更改 为 "可 计算 属性 名 ”。 
o 将 “Object.assign() 方法 "一 节 中 提 到 的 “供应 者 "更 改 为 “ 源 对 象 ”。 


o “一 级 公民 ”与 “一 级 函数 " 改 为 一 等 公民 ”与 “一 等 函数 "， 两 种 译 法 都 有 ， 但 后 者 貌似 更 
常见 一 些 。 
o Promise 部 分 ， 将 pending ` unsettled 与 settled 分 别 改 译 为 “进行 中 ”、“ 未 处 
理 ”、“ 已 处 理 ”。 
3， 除 此 之 外 的 错误 都 列 在 了 后 面 ， 其 中 有 些 是 原作 的 问题 ， 有 些 则 是 翻译 错误 。 


函数 的 length 属性 用 于 指示 具名 参数 的 数量 ， 而 剩余 参数 对 其 毫 无 影响 。 此 例 中 
pick() 函数 的 length 属性 值 是 1， 因为 只 有 object 参数 被 用 于 计算 该 值 。 


这 段 话 后 添加 一 段 译注 : 


ag dy E nd ee ee 
的 参数 ， 并 且 它 只 能 指示 出 第 一 个 默认 参数 之 前 的 具名 参数 数量 。 例 如 对 于 function 

example(first, second = 'woo', third) {} 函数 声明 来 说 ， EAGT ie? ae 
， 尽管 这 里 有 两 个 无 默认 值 的 具名 参数 。 


第 四 草 扩展 的 对 象 功 能 


使 用 super 引用 的 简单 原型 访问 


此 例 使 用 了 一 个 函数 作为 具名 方法 


修改 为 : 
此 例 使 用 了 一 个 匿名 有 函数 作为 属性 


原文 的 named 用 于 修饰 属性 ， 而 不 是 函数 ， 该 函数 实际 上 是 个 匿名 函数 。 


第 五 章 解构 : 更 方便 的 数据 访问 


参数 解构 的 默认 值 
在 这 一 小 节 最 后 部 分 添加 附注 : 


上 面 的 参数 解构 只 有 一 个 缺点 ， 也 就 是 当 传 入 参数 值 为 null 时 会 引发 程序 异常 。 只 有 
= 


a 
null 与 undefined 是 无 法 被 解构 的 ， 而 传 入 undefined 会 触发 默认 参数 的 使 用 条 
件 ， 从 而 避免 了 异常 ; 但 传 入 null 就 不 会 有 这 么 幸运 了 ， 它 既 不 会 触发 默认 参数 ， 也 
不 能 被 解构 ’ 从 而 导致 异常 
AR ws FFE a ke n 
第 六 章 符号 与 符号 属性 


符号 值 的 转换 
但 若 你 想 直接 将 符号 转换 为 字符 串 ， 则 会 引发 错误 


修改 为 : 


使 用 知名 符号 暴露 内 部 方法 


它 只 是 改变 了 规范 所 描述 的 对 象 特征 


它 只 是 改变 了 规范 描述 对 象 的 方式 


第 七 章 Set 与 Map 


使 用 Weak Map 
“ 非 空 对 象 "修改 为 * 非 null 的 对 象 "， 后 面 “Weak Map 的 初始 化 "小 节 也 要 作 此 修改 。 


“wR js 中 一 般 指 的 是 {} ， 这 与 null 并 不 一 样 。 


对 象 的 私有 数据 
此 例 用 IFE GRIT person 的 定义 ， 其 中 含有 两 个 私有 属性 
修改 为 : 


此 例 用 IFE EZT person 的 定义 ， 其 中 含有 两 个 私有 变量 


第 八 章 迭代 器 与 生成 器 


字符 串 的 迭代 器 

因此 它 不 能 被 用 于 正确 访问 双 字 节 的 字符 
修改 为 : 

因此 它 不 能 被 用 于 正确 访问 双 码 元 的 字符 


属于 原作 的 错误 。 前 面 曾经 介绍 过 ， 编 码 单元 本 身 就 是 两 个 字 节 (16 位 ) 的 ，JS 从 前 就 可 以 
处 理 一 个 码 元 ( 双 字 节 ) 的 字符 ， 例 如 各 种 中 文字 符 。 上 四 版 JS 所 不 能 处 理 的 是 双 编 码 单元 
(一 共 32 位 ， 即 四 个 字 节 ) 的 字符 ， 例 如 后 面 提 到 的 那个 日 文字 符 。 


同 理 
由 于 双 字 节 字 符 被 当 作 两 个 分 离 的 码 元 来 对 待 
修改 为 : 


由 于 四 字 节 字符 被 当 作 两 个 分 离 的 码 元 来 对 待 


传递 参数 给 迭代 器 

关于 “首次 调用 next() 时 传递 参数 是 无 效 "这 一 问题 ， 将 原文 的 翻译 与 译 者 个 人 的 理解 对 调 了 一 
下 位 置 ， 后 者 放 到 附注 部 分 。 

EA Fy 米 Aw 

第 十 章 增强 的 数组 功能 


在 可 和 迭代 对 象 上 使 用 


如 果 一 个 对 输 既 是 类 数组 对 有 象 ， 又 是 可 迭代 对 象 ， 那 么 迭代 器 就 会 使 用 Array.from() 
方法 来 决定 需要 转换 的 值 。 


修改 为 : 


如 果 一 个 对 象 既是 类 数组 对 象 ， 又 是 可 选 代 对 象 ， 那 么 Array.from() 方法 就 会 使 用 和 迭 
代 器 来 决定 需要 转换 的 值 。 


类 型 化 数组 
而 不 像 名 称 暗示 的 那样 ， 能 处 理 所 有 类 型 
修改 为 : 


正如 名 称 所 示 ， 不 是 所 有 类 型 


第 十 二 章 代理 与 反射 接口 
使 用 get 陷阱 函数 进行 对 象 外 形 验 证 


receiver 并 没有 使 用 traplangets ° 而 是 用 了 in 
修改 为 : 


使 用 receiver 而 非 trapTarget 去 配合 in 


将 代理 作为 类 的 原型 
shape 的 原型 是 shape.prototype ， 它 并 不 是 一 个 代理 。 
原作 笔 误 ， 应 修改 为 : 


shape 的 原型 是 Square.prototype ? 它 并 不 是 一 个 代理 


第 十 三 草 用 模块 封装 代码 


浏览 器 模块 说 明 符 方案 


你 无 须 确保 ww2.example.com 已 经 正确 配置 了 它 的 CORS 响应 头 来 允许 跨 域 加 载 ， 这 会 
影 4 响 是 否 能 跨 域 加 载 ， 却 不 会 影 Saal 语法 的 有 效 性 


修改 为 : 


你 必须 确保 ww2.example.com 已 经 正确 配置 了 它 的 CORS 响应 头 来 允许 跨 域 加 载 


这 些 导 入 的 名 称 就 像 是 被 let 所 定义 的 


修改 为 : 
这 些 导 入 的 名 称 就 像 是 被 const 所 定义 的 


原作 在 此 处 的 描述 不 符合 之 前 的 文字 ， 并 且 与 实际 情况 也 有 偏差 。 
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大 大 


第 三 章 函数 


参数 默认 值 表 达 式 


而 在 getValue() 的 函数 声明 初次 被 解析 时 并 不 会 进行 调用 。 这 意味 着 getvalue() $ 
数 若 被 写 为 可 变 的 ， 则 它 有 可 能 会 返回 可 变 的 值 


修改 为 : 
而 在 add() 的 函数 声明 初次 被 解析 时 并 不 会 进行 调用 。 这 意味 着 getvalue() BRR 
写 为 可 变 的 ， 则 它 返 回 的 值 有 可 能 也 会 变化 
名 称 属性 的 特殊 情况 
而 使 用 Function 构造 器 创建 的 函数 ， 其 名 称 属性 则 会 有 "anonymous" 前 组 
修改 为 : 
而 使 用 Function 构造 器 创建 的 函数 ， 其 名 称 属性 为 "anonymous" 
明确 函数 的 双重 用 途 
当 函 数 未 使 用 new 进行 调用 时 ， [[call]] 方法 会 被 执行 
修改 为 : 
当 郊 数 未 使 用 new 进行 调用 时 ， [[call]] 方法 会 被 执行 


首 字母 需要 大 写 。 


new.target 元 属性 


修改 记录 


元 属性 指 的 是 “ 非 对 象 ”( 例 如 new ) 上 的 一 个 属性 ， 并 提供 关联 到 它 的 目标 的 附加 信 
息 。 eee SO 方法 被 调用 时 ， new.target 会 被 十 入 new 运算 符 的 作 
用 目标 ， 该 目标 通常 是 新 创建 的 对 象 实例 的 构造 器 ， 并 且 会 成 为 函数 体内 部 的 this 
值 。 

修改 为 : 


元 属性 指 的 是 " 非 对 象 "〈 例 如 new BH) 上 的 属性 ， 并 提供 与 之 关联 的 目标 的 附加 信 
息 。 当 函数 的 [[construct]] 方法 被 调用 时 ， new 运算 符 的 作用 目标 会 十 入 
new.target 元 属性 ， 此 时 函数 体内 部 的 this 值 是 新 创建 的 对 象 实例 ， 而 new.target 
的 值 正 是 该 实例 的 构造 器 (构造 函数 ) © 
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第 二 草 字符 串 与 正则 表达 式 


识别 子 字符 串 的 方法 
此 处 原文 对 于 endswith() 方法 第 二 个 参数 的 描述 有 误 。 


当 提 供 了 第 二 个 参数 时 ， includes() 4 startswith() 方法 会 从 该 索引 位 置 开始 尝试 匹 
配 ; 而 endswith() 方法 会 将 字符 串 长 度 减 去 该 参数 ， 以 此 为 起 点 开始 尝试 匹配 。 当 第 
二 个 参数 未 提供 时 ， includes() 4 startswith() 方法 会 从 字符 串 起 始 处 开始 查找 ， 而 
endswith() 方法 则 从 尾部 开始 。 


修改 为 : 


当 提 供 了 第 二 个 参数 时 ， includes() 4 startswith() 方法 会 从 该 索引 位 置 开 始 尝 试 匹 
配 ; endswith() 方法 则 会 将 该 位 置 减 去 需 搜 索 文本 的 长 度 ， 在 目标 位 置 尝试 匹配 。 
当 第 二 个 参数 未 提供 时 ， includes() 与 startswith() 方法 会 从 字符 串 起 始 处 开始 查 
找 ， 而 endswith() 方法 则 从 尾部 开始 (事实 上 是 在 原 字 符 囊 长 度 减 去 需 搜 索 文本 长 度 
的 位 置 上 进行 正 向 查找 ) 。 


此 外 ， 


调用 msg.endswith("o", 83) 也 从 位 置 4 开始 搜索 ， 因 为 参数 8 会 从 字符 串 的 长 度 值 ( 
2) 中 被 减 去 ; 


修改 为 : 


调用 msg.endswith("o", 8) 会 在 位 置 7 进行 匹配 党 试 ， 因 为 需要 将 参 8 减 去 字符 囊 
"oh 的 长 度 4a ; 
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第 二 章 字符 串 与 正则 表达 式 


识别 子 字 符 串 的 方法 
前 三 次 调用 没有 使 用 第 二 个 参数 
修改 为 : 


前 六 次 调用 没有 使 用 第 二 个 参数 


第 三 章 函数 
new.target 元 属性 
译注 : 原文 此 段 代码 有 误 。 
if (new.target === Person) { 
这 一 行 原先 写 为 : 
if (typeof new.target === Person) { 


原先 的 写法 是 有 问题 的 ， 不 能 正确 发 


出 错误 。 


w 


作用 ， 它 会 在 new Person("Nicholas") 这 行 就 抛 


删 掉 这 一 段 译 注 。 由 于 向 原作 者 提交 issues 并 已 经 被 确认 ， 原 文 已 修改 ， 此 段 译注 就 没有 必 
要 保留 了 。 
没有 this Hg 
GM) > this 值 就 会 是 undefined ° 
RA : 


否则 ， 


) 


this 值 就 会 是 全 局 对 和 象 〈 在 浏览 器 中 是 window ， 在 nodejs 中 是 global 


第 六 章 符号 与 符号 属性 


使 用 符号 值 


这 个 例子 首先 使 用 对 象 的 “ 需 计 算 字面 量 属性 "方式 创建 了 一 个 符号 类 型 的 属性 
firstname ， 该 属性 默认 不 可 枚 举 ， 此 行为 与 非 符号 类 型 的 “ 需 计 算 字 面 量 属性 名 ” 正 相 
B. o 


这 个 例子 首先 使 用 对 象 的 “ 需 计 算 字 面 量 属性 ”方式 创建 了 一 个 符号 类 型 的 属性 
firstName ， 该 属性 使 用 getOwnPropertyDescriptor 查看 时 显示 为 可 枚 举 ( 
enumerable: true ) ， 但 无 法 用 for-in 循环 遍历 ， 也 不 会 显示 在 object.keys() 的 结果 


中 。 
Symbol.match ` Symbol.replace ` Symbol.search 4 
Symbol.split 

使 得 开发 者 无 法 将 自 定 义 对 象 模拟 成 正则 表达 式 
稍微 添加 点 附注 ， 让 意思 更 明确 : 


使 得 开发 者 无 法 将 自 定义 对 象 模拟 成 正则 表达 式 (并 将 它们 传递 给 字符 串 的 这 些 方法 ) 





此 外 : 

这 4 个 符号 表示 可 以 将 正则 表达 式 作 为 对 应 方法 的 第 一 个 参数 传 入 
修改 为 : 

这 4 个 符号 表示 可 以 将 正则 表达 式 作 为 字符 囊 对 应 方法 的 第 一 个 参数 传 入 


范例 代码 : 


[Symbol.match]: function(value) { 


return value.length === 10 ? [value.substring(9, 10)] : null; 
}, 
[Symbol.replace]: function(value, replacement) { 
return value.length === 10 ? 
replacement + value.substring(10) : value; 
}, 
修改 为 : 
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[Symbol ,match]: function(value) { 


return value.length === 10 ? [value] : null; 
}, 
[Symbol.replace]: function(value, replacement) { 
return value.length === 10 ? replacement : value; 
}, 


第 七 章 Set4 Map 


创建 Set 并 添加 项 目 
(在 Set 内 部 的 比较 使 用 了 第 四 章 讨论 过 的 object.is() 方法 ， 来 判断 两 个 值 是 否 相 
等 ) 

添加 文字 ， 改 为 : 
(在 Set 内 部 的 比较 使 用 了 第 四 章 讨论 过 的 object.is() 方法 ， 来 判断 两 个 值 是 否 相 
等 ， 唯 一 的 例外 是 +0 与 -0 在 Set 中 被 判断 为 是 相等 的 ) 


Set 类 型 之 间 的 关键 差异 


1， 对 于 weakset 的 实例 ， 只 要 调用 add() 、 has() 或 delete() 方法 时 传 入 了 非 
对 象 的 参数 ， 就 会 抛 出 错误 ; 


修改 为 : 


1， 对 于 weakset 的 实例 ， 若 调用 add() 方法 时 传 入 了 非 对 象 的 参数 ， 就 会 抛 出 错误 
( has() 或 delete) 则 会 在 传 入 了 非 对 象 的 参数 时 返回 false ) ; 


第 八 章 迭代 器 与 生成 器 
生成 器 委托 


生成 器 可 以 用 星 号 ( * ) 配合 yield 这 一 特殊 形式 来 委托 另 一 个 生成 器 
修改 为 : 

生成 器 可 以 用 星 号 ( * ) 配合 yield 这 一 特殊 形式 来 委托 其 他 的 多 代 器 
解构 与 for-of 循环 


Map 默认 构造 器 的 行为 有 助 于 在 for-of 循环 中 使 用 解构 
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修改 记录 


修改 为 


Map 默认 迁 代 器 的 行为 有 助 于 在 for-of 循环 中 使 用 解构 


第 九 章 JS 的 类 
基本 的 类 表达 式 


在 匿名 的 类 表达 式 内 personclass.name 是 个 空 的 字符 串 。 而 若 使 用 了 类 声明 ， 则 


PersonClass.name 就 会 是 "PersonClass" ° 


使 用 类 声明 还 是 类 表达 式 ， 主 要 是 代码 风格 问题 。 相 对 于 函数 声明 与 函数 表达 式 之 
间 的 区 别 ， 类 声明 与 类 表达 式 都 不 会 被 提升 ， 因 此 对 代码 运行 时 的 行为 影响 甚 微 。 
唯一 显著 的 差异 是 匿名 类 表达 式 的 name 属性 是 一 个 空 字 符 串 ， 而 类 声明 的 name 
属性 则 与 类 名 相同 (例如 ， 使 用 类 声明 时 ， personclass.name 的 值 为 


"PersonClass" ) i 
修改 为 (原作 者 删除 了 这 两 段 的 大 量 文字 ) 
使 用 类 声明 还 是 类 表达 式 ， 主 要 是 代码 风格 问题 。 相 对 于 函数 声明 与 函数 表达 式 之 间 的 
区 别 ， 类 声明 与 类 表达 式 都 不 会 被 提升 ， 因 此 对 代码 运行 时 的 行为 影响 其 微 。 
AK AR A ey RR 


为 了 达成 这 个 目的 ， 类 的 继承 模型 与 ESS 或 更 早 版 本 的 传统 继承 模型 有 轻微 差异 ， 体 现 
在 以 下 两 个 重要 方面 : 


修改 为 (删除 最 后 一 些 文字 ) 
为 了 达成 这 个 目的 ， 类 的 继承 模型 与 ES5 或 更 早 版 本 的 传统 继承 模型 有 轻微 差异 : 


此 外 删除 后 面 两 段 文 字 的 编号 。 


第 十 二 章 代理 与 反射 接口 


起 始 第 二 段 


ES6 通过 增加 内 置 对 象 使 得 开发 者 能 进一步 接近 JS 引擎 的 能 力 。 为 了 让 开发 者 能 够 创 
建 内 置 对 象 ， 


修改 为 : 


ES6 让 开发 者 能 进一步 接近 JS 引擎 的 能 力 ， 这 些 能 力 原先 只 存在 于 内 置 对 象 上 。 
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ownKeys [I 24 4 


此 节 的 范例 输出 有 误 。 


console 


console . 


console . 


console 


console. 
console. 


console. 
console. 


此 外 删除 


. log(names. length); 
log(names[@]); 


log(keys.length); 
. Log(keys[0]); 


log(names.length); 
log(names[@]); 


log(keys.length); 
log(keys[0]); 


这 段 话 : 


// 1 
// “proxy" 


全 
// "proxy" 


Uf a. 
// "name" 


// 1 
// "name" 


BPR ownkeys 代理 陷阱 允许 你 修改 少数 操作 所 返回 的 键 值 ， 但 它 不 能 影响 一 些 常 用 操 
作 ， 例 如 for-of 循环 以 及 object.keys() 方法 ， 这 些 都 是 使 用 代理 所 无 法 改变 的 。 


